在跨浏览器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) {
let el = document.createElement('pre');
el.textContent = msg;
div.appendChild(el);
}
input.addEventListener("change", function() {
log("CHANGE: " + input.value);
});
input.addEventListener("keyup", function() {
log("KEYUP: " + input.value);
});
input.addEventListener("drop", function() {
log("DROP: " + input.value);
});
button.addEventListener("click", function() {
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>
最佳答案
您可以通过 getData 获取删除数据的文本值方法:
// This will get the current data value dropped as a string
event.dataTransfer.getData("text");
并防止在输入中设置相同的值:
// This will prevent the input to be changed with the dropped data
event.preventDefault();
所以完整的事件处理程序将如下所示:
input.addEventListener('drop', function (event) {
event.preventDefault();
var textData = event.dataTransfer.getData('text');
// do whatever you want with the the text data
});
因此,您不必尝试在正确的时刻获取输入值,而是可以拦截 drop 事件中的数据并对其进行处理。您甚至可以稍后将其设置为文本。
如果它能解决您的问题,请告诉我。
关于javascript - 获取掉落到输入元素时的值更改事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46359162/