意外的粘贴事件行为

Unexpected Paste Event Behaviour

本文关键字：事件 意外      更新时间：2024-06-19

我创建了一个竞赛表格。我有4个文本框，每个文本框包含4个字符，然后组合起来创建一个16位代码。这一切都很顺利。

示例代码：LAME DKAJ XWNS YXRZ

我的问题是，我想监视粘贴事件（如果用户决定粘贴代码）。然而，源代码中的16位代码包含空格——我的目标是将这些空格中的代码拆分为4组，每组4个字符，并自动填充方框。

但是，在使用粘贴事件时，我会遇到意外的行为。例如，第一次将文本粘贴到框中时，值的console.log返回一个空白字符串。第二次粘贴会记录第一次应该记录的内容，依此类推。这表明它是在粘贴事件开始时记录的，而不是在代码粘贴到文本框中之后。我这样做是错的，还是故意的？

如果这是粘贴事件的预期行为，那么在粘贴事件完成后，我如何捕捉框中的文本？

https://jsfiddle.net/h4w946js/（检查控制台）

// JS CODE
function splitCode(){
    var input = document.getElementById('part1');
    input.addEventListener('paste', function(){
        console.log(this.value);
    })
}

要获得粘贴的文本，请使用以下代码：

input.addEventListener('paste', function(e) {
    if (window.clipboardData && window.clipboardData.getData) { // IE
        console.log(window.clipboardData.getData('Text'));
    } else if (e.clipboardData && e.clipboardData.getData) { // other browsers
        console.log(e.clipboardData.getData('text/plain'));
    }
});
相关文章：