防止輸入文本元素接受丟棄的元素作爲輸入

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>