如何阻止文本输入框接受拖放并显示禁止拖放光标？

要让输入元素在拖拽时显示禁止放置的光标，核心是处理**dragover事件**，并明确设置拖放行为为禁止。浏览器默认在拖拽经过元素时会显示允许放置的光标，即使你阻止了drop事件，也需要修改dragover阶段的行为来改变光标样式。

实现代码 #

<input id="a" type="text">

<table><tr><td>Hello</td></tr></table>

<script>
const input = document.getElementById('a');

// 处理拖拽经过事件，设置禁止拖放光标
input.addEventListener('dragover', (e) => {
  e.preventDefault();
  // 指定拖放效果为"无"，触发禁止光标
  e.dataTransfer.dropEffect = 'none';
});

// 阻止实际的拖放操作
input.addEventListener('drop', (e) => e.preventDefault());
</script>

关键说明 #

• dragover事件中必须调用preventDefault()：这会取消浏览器默认的允许放置行为，为自定义光标样式铺路。
• e.dataTransfer.dropEffect = 'none'：直接告诉浏览器当前元素不接受拖放，触发系统自带的"禁止进入"光标样式，这在Chrome（Windows 11环境）中可以直接生效。

内容的提问来源于stack exchange，提问作者Austin France