Question

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

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

<img>
<input type="text">

...我希望阻止{strong>接受 <input>元素作为输入。{/ p>

我知道可以防止拖动<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">

只需捕获原生drop事件，然后在您希望禁用的输入上取消它。

Answer 2

将Event.preventDefault()与drop事件合并：

var input = document.querySelector('input');

input.addEventListener('drop', function(ev) {
  
  ev.preventDefault();

})

<input type='text' value='ASD'>
<br>
<img src='http://qnimate.com/wp-content/uploads/2014/03/images2.jpg'>
<br>

Answer 3

它实际上比您想象的要容易，不需要复杂的js只需将此属性放在输入标记上：

ondrop="return false;"

防止输入文本元素接受已删除元素作为输入

3 个答案: