javascript - 防止输入文本元素接受丢弃的元素作为输入

Question

是否可以设置 <input>元素，所以它不接受任何形式的丢弃输入？

例如，如果我们在页面上有以下元素...

• <img>
• <input type="text">

...我想阻止 <input> accepting 掉落的元素 <img>作为输入。

我知道可以防止拖动 <img>元素本身，但这不是我想做的事情。

我的目标解决方案应该适用于任何形式的放置元素(不限于图像)，并且最好是在 vanilla javascript 中。

Answer 1

很简单，是的:

var el = document.getElementById('false');
el.addEventListener('drop', function(e) {
  e.preventDefault();
  console.log("Drop event blocked!")
});

input {
  padding: 5px;
  margin: 10px;
}

<input placeholder="accepts drops" type="text" id="true">

<input placeholder="doesnt accept" type="text" id="false">

<img src="https://lorempixel.com/200/200">

只需捕获 native drop 事件并在您希望禁用的输入上取消它。