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

Question

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

举例来说，如果我们有一个页面上的下列元素...

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

...我想，以防止<input>元素从接受作为输入丢弃<img>。

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

我想要的解决方案应该适用于任何形式的下拉元素（不限于图片），并且应该最好在香草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

它实际上是很容易，你认为，不能简单地需要复杂的js把输入标签这个属性：

ondrop="return false;" 

Answer 3

与drop事件联合Event.preventDefault()：

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>