Javascript jQuery使用带有on(';输入';)的event.preventDefault()进行查询
我正在用Javascript jQuery使用带有on(';输入';)的event.preventDefault()进行查询,javascript,jquery,html,paste,jquery-events,Javascript,Jquery,Html,Paste,Jquery Events,我正在用$('selector')捕捉粘贴事件 然后我尝试测试粘贴的内容,如果没有通过验证,请使用event.preventDefault()取消粘贴。不幸的是,在执行侦听器函数时,文本已经粘贴,并且event.preventDefault()什么也不做 那么,捕捉粘贴事件的好方法是什么?如果粘贴的内容无法验证,请撤消/阻止粘贴 我知道我可以使用.on('paste',function(event){…}),但这并不能给我粘贴的文本或粘贴后输入元素的内容,除非我使用setTimeout(),并有
$('selector')捕捉粘贴事件代码>
然后我尝试测试粘贴的内容,如果没有通过验证,请使用event.preventDefault()
取消粘贴。不幸的是,在执行侦听器函数时,文本已经粘贴,并且event.preventDefault()
什么也不做
那么,捕捉粘贴事件的好方法是什么?如果粘贴的内容无法验证,请撤消/阻止粘贴
我知道我可以使用.on('paste',function(event){…})
,但这并不能给我粘贴的文本或粘贴后输入元素的内容,除非我使用setTimeout()
,并有几分钟的等待时间,我想避免使用setTimeout()
我对这个问题的理解是,在通过特定验证之前,我们不能允许任何数据粘贴到文本框内。与使用event.preventDefault()
不同,我们可以在用户输入任何内容时捕获值,使用on('input')
侦听器并根据特定条件对其进行验证,如果验证失败,则清空文本框值
(如果我们仍然需要在('input')上使用
示例代码(我使用console.log()
打印粘贴的值):
HTML:
<input type='text' id="selector" />
$(document).ready(function() {
$('#selector').on('input', function (e){
if(e.target.value !== "myValue"){
$('#selector').val('');
}
else{
console.log(e.target.value);
}
});
});
尝试使用jquery的.change事件
如果值不满足您的条件,则将值设置为空白。首先,对输入元素的事件触发顺序进行一些背景介绍:
向下键->按键->粘贴->输入->向上键->更改
无论何时调用preventDefault
它都会停止链,就像什么都没发生一样
因此,我的建议是捕获粘贴事件,防止其默认行为,并在那里执行您的逻辑
我知道我可以使用.on('paste',function(event){…}),但是
没有给我粘贴的文本或文件的内容
粘贴后输入元素
实际上,您可以检索剪贴板的内容。请参见此。支持所有主要浏览器(但仅限于IE11+)。我不知道在撰写问题时,该功能是否可用
守则注释:
- 此解决方案不包括
setTimeout
。无论何时使用setTimeout
进行粘贴,都会在很短的时间内看到粘贴的文本,就像闪烁效果一样
- 如果文本符合条件,我将在
输入中手动设置它。但是,这不会触发输入
和更改
事件。如果您需要它们,只需手动触发它们
- 类似的方法是首先检查文本,如果文本不符合要求,则调用
preventDefault
,否则什么也不做。这样可以避免在输入中手动设置值并在之后触发事件
使用
$('selector').on('input', function(event) { ... });
如果验证没有通过,删除粘贴的文本对我来说似乎很有效
遗憾的是,访问剪贴板有一些缺陷(浏览器询问是否允许检查剪贴板、跨浏览器兼容性等)
如果您同意保存输入的最后一个值,无论如何都可以计算粘贴的文本
下面是我计算粘贴文本的方法
我希望这对你有帮助:)
(如果您发现任何缺陷,请随时改进粘贴文本的计算)您可以创建一个JSFIDLE示例吗?事件。preventDefault()阻止默认操作,并且当绑定到输入
事件时,它不会真正阻止您在输入中键入或粘贴任何内容?缓存粘贴内容中的值时,您必须延迟该值以获取值,但不能“几分钟”,将超时设置为零,它应该还能工作。我想如果设置100ms
超时来捕获粘贴和验证时输入的值,而不是min
,也没关系。你会这样做吗?@adeneo我不喜欢使用setTimeout的原因是,据我所知,OS process scheduler可以决定以这样的方式为进程赋予优先级,即在使用粘贴的内容更新输入元素之前可以执行setTimeout函数。尽管如此,我意识到我可能在这方面完全错了……当某些文本被书写而不是粘贴时,小提琴也会应用验证。我希望这是您的意图。即使事件顺序正确,“更改”只会在输入失去焦点时出现气泡(紧接着模糊之前)。另外请注意,如果您的意思是事件正在冒泡,那么preventDefault不会停止事件链。如果你想实现这一点,你还需要调用stopPropagation。(请参阅)我相信onpaste
是实验性的,即使在Chrome 86中,您似乎也无法从事件中检索输入数据。objectchange事件将很晚冒泡(只有在输入失去焦点后)
$('selector').on('input', function(event) { ... });