10

我正在捕捉粘贴事件$('selector').on('input', function(event) { ... });

然后我尝试测试已粘贴的内容，如果未通过验证，请使用 取消粘贴event.preventDefault()。不幸的是，在执行侦听器函数时，文本已经被粘贴并且event.preventDefault()什么都不做。

那么什么是捕捉粘贴事件的好方法，如果粘贴的内容没有验证，撤消/阻止粘贴？

我知道我可以使用.on('paste', function(event) { ... })，但这并没有给我粘贴后的文本或输入元素的内容，除非我setTimeout()在等待几分钟后使用，并且我想避免使用setTimeout().

4

4 回答 4

2

首先是input元素事件触发顺序的一些背景知识：

keydown -> keypress -> 粘贴 -> 输入 -> keyup -> 更改

每当您调用preventDefault它时，它就会停止链条，就像什么都没发生一样。

所以我的建议是捕捉粘贴事件，防止其默认行为并在那里执行您的逻辑。

我知道我可以使用 .on('paste', function(event) { ... })，但这并没有给我粘贴的文本或粘贴后输入元素的内容

实际上，您可以检索剪贴板的内容。请参阅此文档。支持所有主流浏览器（但仅 IE11+）。我不知道在撰写问题时此功能是否可用。

小提琴示例

$('#myInput').on('paste', function(e) {
    // Cancel the event - this prevents the text from being entered into the input and stops the event chain
    e.preventDefault();

    // Get the content of the clipboard
    let paste = (event.clipboardData || window.clipboardData).getData('text');

    // Validate what it is pasted       
    if (paste == "text to paste") {
        // If condition is satisfied manually set the value of the input
        $(this)
            .val(paste)
            // Manually trigger events if you want
            .trigger('input')
            .trigger('change');
    }
});

代码注释：

  • 此解决方案不包括setTimeout. 每当您使用它时，setTimeout您会在很短的时间内看到正在粘贴的文本，就像闪烁的效果一样。
  • 如果文本符合条件，我手动将其设置在input. 但是，这不会触发input和change事件。如果您需要它们，只需手动触发它们
  • 类似的方法是先检查文本，如果不符合要求则调用preventDefault，否则什么也不做。这样您就可以避免在输入中手动设置值并在之后触发事件。
于 2019-09-12T11:33:35.673 回答
0

使用

$('selector').on('input', function(event) { ... });

如果验证没有通过，删除粘贴的文本似乎对我有用。

遗憾的是，访问剪贴板有一些缺陷（浏览器询问是否允许检查剪贴板、跨浏览器兼容性等）

如果您可以保存输入的最后一个值，那么无论如何都可以计算粘贴的文本。

这是我计算粘贴文本的方法

https://jsfiddle.net/f710o9qd/2/

我希望这可以帮助你 ：）

（如果您发现任何缺陷，请随时改进粘贴文本的计算）

于 2019-10-03T00:17:21.493 回答
0

尝试使用 jquery 的 .change 事件。

如果 value 不满足您的条件，请将 value 设置为空白。

于 2016-05-10T16:53:46.147 回答
-1

我对这个问题的理解是，除非它通过特定的验证，否则我们不能允许将任何数据粘贴到文本框中。代替使用event.preventDefault()，我们可以在用户输入任何内容时捕获值，使用on('input')侦听器并根据特定条件对其进行验证，如果验证失败，则清空文本框值。

（如果我们仍然需要使用on('input')事件监听器，这是解决方法）

示例代码（我console.log()用于打印粘贴的值）：

HTML：

<input type='text' id="selector" />

JS：

$(document).ready(function() {
 $('#selector').on('input', function (e){
        if(e.target.value !== "myValue"){
        $('#selector').val('');
    }
    else{
        console.log(e.target.value);
    }
 });
});
于 2016-05-10T15:50:00.790 回答