在jQuery中检测输入更改?

2020/09/30 09:21 · javascript ·  · 0评论

事件.change使用jquery时input仅当输入失去焦点时才会触发事件

就我而言,我需要在输入值更改后立即调用该服务(检查值是否有效)。我该怎么做?

更新为澄清和示例

范例:http//jsfiddle.net/pxfunc/5kpeJ/

方法1。input事件

在现代浏览器中使用input事件。当用户在任何时候将值从一个值更改为另一个值时,都将在文本字段中键入,粘贴,撤消操作时,将触发此事件。

在jQuery中这样做

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

从jQuery 1.7开始,替换bindon

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

方法2。keyup事件

对于较旧的浏览器,请使用keyup事件(一旦释放了键盘上的某个键,就会触发该事件,该事件会产生某种误报,因为释放“ w”时,输入值会更改,并且keyup事件会触发,keyup事件触发时释放“ shift”键,但未对输入进行任何更改。)如果用户右键单击并从上下文菜单中粘贴,此方法也不会触发:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

方法3。计时器(setIntervalsetTimeout

为了解决这些限制,keyup您可以设置一个计时器来定期检查输入的值以确定值的变化。您可以使用setIntervalsetTimeout进行此计时器检查。请参阅以下SO问题的标记答案:jQuery文本框更改事件,或查看小提琴以获取使用focusblur事件的工作示例以启动和停止特定输入字段的计时器

如果您有HTML5:

  • oninput (仅在实际发生更改时触发,但立即触发)

否则,您需要检查所有这些可能表明输入元素的值发生更改的事件:

  • onchange
  • onkeyup不是 keydownkeypress因为输入的值尚未包含新的击键)
  • onpaste (如果支持)

有可能:

  • onmouseup (我不确定这一点)

使用HTML5而不使用jQuery,您可以使用inputevent

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

每次输入文本更改时都会触发。

在IE9 +和其他浏览器中受支持。

这里jsFiddle中尝试它

正如其他人已经建议的那样,您的解决方案是嗅探多个事件

从事此工作的插件通常会侦听以下事件:

$ input.on('change keydown keypress keyup mousedown click mouseup',handler);

如果您认为合适,可以添加focusblur以及其他事件。

我建议不要超出侦听事件的范围,因为它会将更多的过程加载到浏览器内存中,以根据用户的行为执行。

注意:请注意,使用JavaScript更改输入元素的值(例如,通过jQuery.val()方法)不会触发上述任何事件。

(参考:
https //api.jquery.com/change/)。

如果希望元素中发生任何更改时都触发该事件,则可以使用keyup事件。

//当元素失去焦点时触发.blur

$('#target').blur(function() {
  alert($(this).val());
});

//要手动触发,请使用:

$('#target').blur();

您可以将jQuery事件(例如keyupkeypress)与输入HTML元素一起使用。您还可以使用blur()事件。

这涵盖了使用jQuery 1.7及更高版本对输入的所有更改:

$(".inputElement").on("input", null, null, callbackFunction);
本文地址:http://javascript.askforanswer.com/zaijqueryzhongjianceshurugenggai.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!