Question

在跨浏览器的Javascript中，如果因为文本被拖放到字段中而导致<input>元素的值发生变化后如何获取事件？

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

用于演示此问题的代码段：

＆＃13;

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");

＆＃13;

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

＆＃13;

Answer 1

您可以使用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事件中的数据，而不是尝试在适当的时刻获取输入值。您甚至可以稍后将其设置为文本。

如果它能解决您的问题，请告诉我。

在drop to input元素上获取值更改事件

1 个答案: