Chrome浏览器中如何禁用输入框选中文本的拖放功能？

当然有办法解决这个问题！针对Chrome浏览器里输入框（input）或文本域（textarea）中选中文本的拖放行为，这里有几个简单且有效的方案：

方法一：通过JavaScript阻止拖放起始事件 #

这是最直接可靠的方式——监听dragstart事件并阻止默认行为。当用户尝试拖动选中的文本时，dragstart会触发，调用preventDefault()就能直接取消拖放操作，同时文本仍保持选中状态（不会影响正常的选中功能）。

针对单个输入元素的代码示例： #

// 获取目标输入框/文本域
const targetInput = document.getElementById('your-input-id');
// 监听dragstart事件并阻止默认动作
targetInput.addEventListener('dragstart', (event) => {
  event.preventDefault();
});

全局处理所有输入框/文本域： #

如果需要批量禁用页面上所有input和textarea的拖放功能，可以用以下代码：

// 选中所有input和textarea元素
document.querySelectorAll('input, textarea').forEach(element => {
  element.addEventListener('dragstart', (event) => {
    event.preventDefault();
  });
});

方法二：禁止文本选中（可选，按需使用） #

如果你不仅想禁用拖放，还希望用户无法选中输入框内的文本，可以用CSS的user-select属性：

input, textarea {
  user-select: none;
  -webkit-user-select: none; /* 针对webkit内核（Chrome）的前缀 */
}

⚠️ 注意：这个方法会完全禁止文本选中，可能影响用户的正常复制操作，所以仅在不需要选中功能的场景下使用。

这些方案在Chrome浏览器中都能稳定生效，其中方法一是优先推荐的，因为它精准针对拖放行为，不会干扰其他正常交互。

内容的提问来源于stack exchange，提问作者Shirley Rozenboim