입력 된 텍스트 요소가 입력으로 받아 들여지지 않도록 방지

Question

<input> 요소를 설정하여 삭제 된 입력 형식을 허용하지 않습니까? 예를 들어

, 우리는 페이지에 다음과 같은 요소가 있다면 ...

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

... 나는 받아들이 에서 <input> 요소를 방지하고자 a는 입력으로 <img>입니다.

나는 <img> 요소 자체의 끌기를 방지하는 것이 가능하다는 것을 알고 있지만,이 작업은 내가 원하는 작업이 아닙니다.

내가 바라는 해결책은 떨어지는 요소 (이미지에만 국한되지 않음)의 어떤 형태로든 작업해야하며 바닐라 자바 ​​스크립트에 넣어 두는 것이 좋습니다.

당신이 단순히 필요한 복잡한 JS 입력 태그에이 속성 두지, 생각하는 것보다 실제로 더 쉽다

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

:

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>