jQuery using event.preventDefault() with on('input')

jQuery using event.preventDefault() with on('input')

本文关键字：using input event preventDefault with on jQuery      更新时间：2023-09-26

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

然后我试着测试粘贴的内容，如果它没有通过验证，用event.preventDefault()取消粘贴。不幸的是，在执行侦听器函数时，文本已经被粘贴，event.preventDefault()没有做任何事情。

那么捕获粘贴事件的好方法是什么，如果粘贴的内容不有效，撤销/阻止粘贴?

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

首先介绍一下input元素的事件触发顺序:

keydown -> keypress -> paste -> input -> keyup -> change

当你调用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，否则什么都不做。这样可以避免在输入中手动设置值并随后触发事件。

尝试使用jquery的。change event .

如果value不满足条件，将value设置为空白

使用

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

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

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

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

下面是我计算粘贴文本

的方法https://jsfiddle.net/f710o9qd/2/

我希望这对你有帮助:)

(如果您发现任何缺陷，可以随意改进粘贴文本的计算)

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

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

示例代码(我使用console.log()打印粘贴的值):

: 

<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);
    }
 });
});
相关文章：