입력 요소에 값 변경 이벤트 가져 오기

브라우저 간 Javascript에서 텍스트를 드래그하여 필드에 끌어다 놓음으로써 <input> 요소의 값이 변경된 후 이벤트를받는 방법은 무엇입니까?입력 요소에 값 변경 이벤트 가져 오기

input.addEventListener("change", cb); // Is not triggered on drop 
input.addEventListener("drop", cb); // Is triggered before the value change

문제를 보여주기 위해 미리보기 :

let input = document.getElementById('input'); 
 
let button = document.getElementById('button'); 
 
let div = document.getElementById('div'); 
 

 
function log(msg) { 
 
\t let el = document.createElement('pre'); 
 
\t el.textContent = msg; 
 
\t div.appendChild(el); 
 
} 
 

 
input.addEventListener("change", function() { 
 
\t log("CHANGE: " + input.value); 
 
}); 
 

 
input.addEventListener("keyup", function() { 
 
\t log("KEYUP: " + input.value); 
 
}); 
 

 
input.addEventListener("drop", function() { 
 
\t log("DROP: " + input.value); 
 
}); 
 

 
button.addEventListener("click", function() { 
 
\t log("CLICK: " + input.value); 
 
}); 
 

 
log("Try dragging text into the input field");

<input id="input"></input> 
 
<button id="button">Click</button> 
 
<div id="div"></div>

출처

2017-09-22 ANisus

Chrome에서 적어도 작동하는 하나의 해결 방법을 발견했습니다. 값을 읽기 전에 'setTimeout (cb, 0)'on * drop *을 실행하십시오. – ANisus

setTimeout을 사용하여 해결 방법을 시도했지만 Firefox에서도 작동합니다. –

당신 수있는 getData 방법으로 삭제 된 데이터의 텍스트 값을 얻을 :

// This will get the current data value dropped as a string 
event.dataTransfer.getData("text");

및 이 같은 값을 설정하지 못하게한다. 와 입력에 :

input.addEventListener('drop', function (event) { 
    event.preventDefault(); 
    var textData = event.dataTransfer.getData('text'); 
    // do whatever you want with the the text data 
});

을 그래서 그 대신 오른쪽 순간에 입력 값을 얻을려고, 당신은에서 데이터를 가로 챌 수 있습니다

// This will prevent the input to be changed with the dropped data 
event.preventDefault();

그래서 전체 이벤트 핸들러는 다음과 같이 될 것이다 이벤트를 드롭하고 그것으로 물건을 할. 나중에 텍스트로 설정할 수도 있습니다.

문제가 해결되는지 알려주세요.

출처

2017-11-09 17:23:05

입력 요소에 값 변경 이벤트 가져 오기

답변

관련 문제