天道酬勤,学无止境

在输入字段中输入 3 个字符时使用 jquery 触发事件(Trigger event with jquery when 3 characters are entered in the input field)

问题

我有一个 HTML 输入字段,可以说

<input type="text" maxlength="50" size="50" name="subject" id="subject">

我需要在输入的每 3 个字符上触发一个函数。

例如:

如果用户输入“aaa” - 触发事件,他继续输入“aaa bbb” - 再次触发事件,等等。

但不应计算空格。

我需要这个将字段的值发布到外部 API - 进行搜索。

以前有人做过吗?

请帮忙。

回答1

尝试这样的事情。 将事件处理程序绑定到页面加载时的input

$(function(){

    $("#subject").change(function(){

         var val = $(this).val().trim();
         val = val.replace(/\s+/g, '');

         if(val.length % 3 == 0) { //for checking 3 characters
               //your logic here
         }

    });      
});
回答2

如果您想在用户键入时实时执行此操作,并且不要求他们从输入中移除焦点,您可以使用keyup事件和稍微修改的逻辑来过滤空格键按下。

$('#subject').on('keyup', function(e) {
    if (e.which !== 32) {
        var value = $(this).val();
        var noWhitespaceValue = value.replace(/\s+/g, '');
        var noWhitespaceCount = noWhitespaceValue.length;
        if (noWhitespaceCount % 3 === 0) {
            // Call API
        }
    }
});

jsfiddle

回答3

您还需要在子句中添加vals.length > 0才能在length = 0时工作:

//for checking 3 characters
if( vals.length > 0 && val.length % 3 == 0 )  

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何使用jQuery触发输入事件?(How to trigger an input event with jQuery?)
    问题 我想在单击按钮时将'a'添加到输入值 这是我的代码(使用jQuery 1.4.4): $("#button").click(function(){ $("#input").trigger("focus"); var e = jQuery.Event("keypress"); e.which = '97'; $("#input").trigger(e); }) 但是,它似乎仅触发“焦点”事件,但未能“按键”。 回答1 像这样?? 抱歉,我对你的著作感到困惑。 $("#button").click(function(){ $("#input").trigger("keypress") // you can trigger keypress like this if you need to.. .val(function(i,val){return val + 'a';}); }); 参考:.val(function(index(value,value))); 回答2 我用了: $('#selector').val(quantity).trigger("input"); 回答3 为什么不只是附加到val()呢? $("#button").click(function(){ $("#input").val( $("#input").val() + "a" ); }) 回答4
  • 每个多个字段集的 jQuery 验证,如何使用不同的事件来触发每个部分的验证(jQuery validation per multiple fieldsets, how to use different event to trigger validation per section)
    问题 我有一个非常非常长的表单(大约 300 个字段),我使用这个漂亮的 jQuery 插件表单向导将其分解为不同的部分。 如果您将表单分组到不同的字段集,FormWizard 将一次自动显示一个部分,并带有一个 Next 超链接将您带到下一个部分: <a id="step0Next" class="next" href="#">Next ></a> 我的问题是:使用 jQuery 验证插件,我如何在用户单击“下一步”等时验证每个字段集,而不是使用“提交”按钮。 换句话说,如何将触发事件从提交更改为六个不同部分的六个不同超链接? 感谢您帮助这个新手。 回答1 我不认为这是一个微不足道的解决方案,但我在我当前的项目中做了类似的事情。 1)为每个下一个链接绑定一个事件。 在这种情况下,您将使用 jquery 验证插件的element方法手动验证字段集中的每个输入。 2) 在事件中,获取当前字段集。 你的插件可能会为你跟踪这个,但我不熟悉它。 3) 搜索字段集的所有输入并单独验证它们。 4) 如果字段集中的任何输入无效,请不要前进到下一页。 每当单击下一个链接时,以下代码都会手动验证字段集中的非隐藏输入。 它没有显示如何检索字段集和验证器,或者如果表单无效,如何停止前进到下一个字段集。 您的表单插件可能会对此有所帮助。 您应该从这个示例中得到的是,您可以使用 jquery
  • 将文本放入数字输入中不会触发更改事件?(Putting text in a number input doesn't trigger change event?)
    问题 例子 似乎在<input type="number"/>中输入文本不会触发更改事件。 我想要一个更改事件,以便我可以警告用户修复他们的输入。 如何为此获取更改事件,并获取当前值以便验证错误输入? 我一直在 Chrome 中进行测试。 $('input').on('change', function() { alert('change'); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> put letters in me and press tab: <input type="number"/> 回答1 正如pickypg 所指出的,如果用户在<input type='number'>元素中<input type='number'> ' abcd ',则无法通过$(this).val()获得值'abcd' 。 (警告:我只在 Chrome 中测试过。) 但是,您可以通过调用myDOMelement.checkValidity()或查看myDOMelement.validity对象的各个属性来确定 HTML5 输入有效性约束是否满足(有效)。 这至少可以让您区分空白字段(有效)和包含“ abcd ”(无效)的字段。 在此处查看有关 HTML5
  • 单词建议开启时,关键事件不会在Android上的Firefox中触发(Key event doesnt trigger in Firefox on Android when word suggestion is on)
    问题 我有一个搜索字段,在键入时会触发自动完成搜索。 我在键盘上触发它。 这在大多数浏览器中都能完美运行,但是在Android上的Firefox中却无法正常工作。 键入时似乎未触发keyup事件。 仅当在Android键盘设置中打开了单词建议功能时,才会发生这种情况。 我在Google搜索中看到,自动完成搜索适用于相同的设置,因此显然可以做到。 我想知道如何? 我需要听这件事吗? 另外,我尝试收听事件更改,按键按下和按键按下,但均未触发。 HTML: <input type="text" id="searchField" autocomplete="off" spellcheck="false" autocorrect="off" /> jQuery事件绑定: $('#searchField').keyup(function (e) { var searchValue = $(this).val(); searchApi._executeAutocomplete(searchValue); }); 笔记: 有时,会触发按键事件,这通常是敲击一个不会导致形成单词的过程的按键。 这里最明显的是Enter ,它总是触发。 另一个是Space ,它的触发是因为没有单词包含空格,因为space是完成单词的定义。 如果最后删除的字符不在单词内,则退格键触发。
  • 以编程方式触发typeahead.js结果显示(Programmatically triggering typeahead.js result display)
    问题 我在从查询字符串预填充的输入字段上使用Twitter的typeahead.js(https://github.com/twitter/typeahead.js/)。 加载页面后,我想以编程方式触发预输入结果的显示,而用户无需在表单字段中键入任何内容。 开箱即用,仅当用户手动在输入字段中键入内容并且我无法在typeahead.js中找到可调用以触发结果显示的任何方法时,才会触发typeahead.js。 任何指针将不胜感激。 谢谢! 回答1 触发输入似乎可以做到这一点。 $(".typeahead").eq(0).val("Uni").trigger("input"); 在示例页面上对此进行了测试。 回答2 根据我的测试(请参阅小提琴),必须使用focus()方法来显示下拉列表。 所以: theVal = $('.typeahead').val(); $(".typeahead").typeahead('val', '') $(".typeahead").focus().typeahead('val',theVal).focus(); 在第1行,我们将Typeahead输入的当前值分配给变量theVal ; 在第2行中,我们只需重置typeahead的计算值即可; 和在第3行上,我们放回原始值和焦点,这将导致显示建议下拉列表,就像用户键入了某些内容一样。
  • 在文本框中按Enter时如何触发HTML按钮?(How to trigger HTML button when you press Enter in textbox?)
    问题 所以到目前为止,我的代码是: <fieldset id="LinkList"> <input type="text" id="addLinks" name="addLinks" value="http://"> <input type="button" id="linkadd" name="linkadd" value="add"> </fieldset> 它不在<form> ,就像在<div> 。 但是,当我在名为“ addLinks”的textbox键入内容时,希望用户能够按Enter并触发“ linkadd” button ,该button随后将运行JavaScript函数。 我怎样才能做到这一点? 谢谢 编辑:我确实找到了此代码,但似乎没有用。 $("#addLinks").keyup(function(event){ if(event.keyCode == 13){ $("#linkadd").click(); } }); 回答1 $(document).ready(function(){ $('#TextBoxId').keypress(function(e){ if(e.keyCode==13) $('#linkadd').click(); }); }); 回答2 是的,是2021年。我相信这仍然成立。 请勿使用keypress 当用户按下不产生任何字符的键
  • 使用jQuery触发按键事件的明确方法(Definitive way to trigger keypress events with jQuery)
    问题 我已经阅读了有关此问题的所有答案,但似乎没有一种解决方案有效。 另外,我感觉到用特殊字符触发按键根本不起作用。 有人可以验证谁已这样做吗? 回答1 如果您想触发按键或按键事件,那么您要做的就是: var e = jQuery.Event("keydown"); e.which = 50; // # Some key code value $("input").trigger(e); 回答2 现在,使用jQuery 1.6+会更加简洁: var e = jQuery.Event( 'keydown', { which: $.ui.keyCode.ENTER } ); $('input').trigger(e); (如果您不使用jQuery UI,请改用相应的键码。) 回答3 真正的答案必须包括keyCode: var e = jQuery.Event("keydown"); e.which = 50; // # Some key code value e.keyCode = 50 $("input").trigger(e); 即使jQuery的网站说which和keyCode都已规范化,但它们还是很容易出错。 对e.which和e.keyCode进行标准的跨浏览器检查始终是最安全的,在这种情况下,只需定义两者即可。 回答4 如果您也使用jQuery UI,则可以执行以下操作:
  • 停止键入/书写后,如何在输入文本中触发事件?(How to trigger an event in input text after I stop typing/writing?)
    问题 我想在我停止在输入文本框中键入(而不是在键入时)字符之后触发事件。 我已经尝试过: $('input#username').keypress(function() { var _this = $(this); // copy of this object for further usage setTimeout(function() { $.post('/ajax/fetch', { type: 'username', value: _this.val() }, function(data) { if(!data.success) { // continue working } else { // throw an error } }, 'json'); }, 3000); }); 但是此示例为每个键入的字符产生一个超时,如果键入20个字符,我将收到大约20个AJAX请求。 在这个小提琴上,我用简单的警报而不是AJAX演示了相同的问题。 有没有解决的办法,或者我只是用一种不好的方法呢? 回答1 您必须像以前一样使用setTimeout但是还必须存储引用,以便可以继续重置限制。 就像是: // // $('#element').donetyping(callback[, timeout=1000]) // Fires callback when a user has
  • 如何使用jQuery模拟输入字段中的输入?(How to simulate typing in input field using jQuery?)
    问题 我想要的是使用javascript模拟<input>字段中的键入。 我有以下代码: var press = jQuery.Event("keydown"); press.ctrlKey = false; press.which = 65; $("#test").trigger(press); 但是,当我加载页面时, #test输入字段没有键入的字符,键码“ 65”代表“ A”,但是没有“ A”输入。 基本上我想要的是使用Greasemonkey自动输入网站。 请给我一些想法或一些库,我可以用它来完成此工作。 非常感谢! 回答1 您可以发送关键事件,监听它们的任何东西都可以得到它们,但是它们不会更改输入,因此,例如,您不会看到字母A出现。 这主要是安全的事情; 有关此问题的讨论,请参见“手动触发事件”。 因此,如果要显示字母,则必须在发送键事件时更改输入的值。 有一个jQuery插件,请参见“ $ .fn.sendkeys插件”。 您可以在此jsFiddle上看到<input>对用户应用的键,键事件以及该插件的反应。 作为参考,这是该jsFiddle中的关键代码段: $("button").click ( function (zEvent) { if (zEvent.target.id == "simA_plain") { console.log ("Send Plain
  • jQuery“输入”事件(jQuery 'input' event)
    问题 在我看到这个jsfiddle之前,我从未听说过jQuery中的一个称为input的事件。 您知道它为什么起作用吗? 它是keyup的别名吗? $(document).on('input', 'input:text', function() {}); 回答1 通过用户界面更改元素的文本内容时发生。 这不是很长的别名keyup因为keyup将会触发即使键不执行任何操作(例如:按,然后释放Control键将触发keyup事件)。 思考它的一种好方法是这样的:每当输入更改时,该事件就会触发。 这包括-但不限于-按下可修改输入的键(例如, Ctrl本身不会触发事件,但是Ctrl-V会粘贴一些文本),选择自动补全选项, Linux样式的单击中键粘贴,拖放以及许多其他操作。 有关更多详细信息,请参见本页和对此答案的评论。 回答2 oninput事件对于跟踪输入字段的更改非常有用。 但是,在IE版本<9中不支持该功能。但是,较旧的IE版本具有其自己的专有事件onpropertychange ,其作用与oninput相同。 因此,您可以通过以下方式使用它: $(':input').on('input propertychange'); 拥有完整的跨浏览器支持。 由于可以为任何属性更改触发属性更改,例如,禁用的属性已更改,因此您需要包括以下内容: $(':input').on(
  • 浏览器自动填充数据时启用按钮(Enable button when browser fills data automatically)
    问题 http://jsfiddle.net/jy3UR/2/ 上面给出的是小提琴。 我有一个简单的登录表单。 用户名、密码文本字段和提交按钮。 在输入用户名和密码之前,提交按钮保持禁用状态。 我已经使用下面给出的 jQuery 函数成功地做到了这一点。 var $input = $('input'), $register = $('#signin'); $register.attr('disabled', true); $input.keyup(function() { var trigger = false; $input.each(function() { if (!$(this).val()) { trigger = true; } }); trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled'); }); 下面给出的是我的表格。 <div class="form-group"> <label for="txtusername" class="col-sm-4 control-label">Username</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtusername
  • 在输入文本上触发 jQuery 的按键事件(Trigger the jQuery's keypress event on an input text)
    问题 关于 .trigger() 方法、Event 对象、which 属性、JS 字符代码和下面的代码,为什么#example输入没有将字符a作为自动写入值? 我误解了.trigger()方法吗? <input type="text" name="example" id="example" value="" /> <script> $(function() { var e = jQuery.Event("keydown", { which: 65 }); $("#example").focus().trigger(e); }); </script> 回答1 您所犯的错误是您期望 jQuery 的trigger方法执行的操作。 如果您查看代码,您会发现它实际上正在执行 jQuery 注册的事件处理程序,而不是DOM Level 3 事件。 因为它只执行 jQuery 处理程序,所以您不会导致change事件,这是您需要触发以更新文本框的 value 属性的事件。 回答2 根据文档 当相应的事件发生时,任何附加了 .bind() 或其快捷方法之一的事件处理程序都会被触发。 $('#foo').bind('click', function() { alert($(this).text()); }); $('#foo').trigger('click'); 在您的情况下,它将是: $('
  • 如果使用 jQuery val() 或 JavaScript 更改值,则输入事件不起作用(Input event not working if value is changed with jQuery val() or JavaScript)
    问题 如果我以编程方式更改输入字段的值,则不会触发input和change事件。 例如,我有这个场景: var $input = $('#myinput'); $input.on('input', function() { // Do this when value changes alert($input.val()); }); $('#change').click(function() { // Change the value $input.val($input.val() + 'x'); }); <input id="myinput" type="text" /> <button id="change">Change value</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 问题:当我在文本字段中输入时会触发该事件,但在我按下按钮时不会触发该事件。 有没有办法通过某种事件或其他方式实现这一点,而无需手动执行? 我不想做的事情:我可以遍历我的所有代码,手动在任何地方添加trigger或函数调用,但这不是我想要的。 为什么:我想自动执行此操作的主要原因是我有很多输入字段和很多不同的地方,我可以通过编程更改这些输入。
  • 在 onkeyup 事件中更改值时不会触发 onchange 事件(onchange event does not fire when value is changed in onkeyup event)
    问题 概述: 我正在编写一个 jquery 插件,它将文本框转换为时间输入框。 这意味着它允许用户以 HH:MM 格式输入时间。 此过程的一部分是在正确的位置插入冒号 (:)。 在 keyup 上,我检查用户是否输入了 2 个数字,如果是,则在输入的值后附加一个冒号。 问题: 这种方法工作正常,除非有人在文本框上应用插件但又想要自定义 onchange 处理程序。当代码以编程方式更新文本框值时,此 onchange 处理程序不会触发,也不会在文本框失去焦点时触发。 我的理解: 我在这里猜测,所以如果我错了,请纠正我。 也许文本框有一个内部"_value" (下划线以区别于公共值属性)字段,该字段在编辑开始之前保存文本框中的值。 当焦点离开文本框时,JS 引擎会检查文本框的当前值是否与文本框的"_value"匹配。如果它们不同,则触发onchange事件。 也许使用常规本机击键更改值"_value"仅修改"_value"值,因此onchange会被触发。 但也许通过 JS进行的值更改会同时修改值和"_value" ,因此 onchange 事件不会触发? 解决方法: 模糊事件触发,因为它与值无关。 所以我可以明确地从模糊事件中触发更改事件。但我不想这样做,因为它是一种黑客行为,打破了模糊和更改的语义。 相关链接: 我在 SO 上找到了几个具有相同问题的链接,但没有答案(恕我直¨
  • onKeyPress与。 onKeyUp和onKeyDown(onKeyPress Vs. onKeyUp and onKeyDown)
    问题 这三个事件之间有什么区别? 谷歌搜索后,我发现: 当用户按下一个键时,会触发onKeyDown事件。 用户释放键时将触发onKeyUp事件。 当用户按下并释放一个键( onKeyDown和onKeyUp )时,会触发onKeyPress事件。 我了解前两个,但是onKeyPress与onKeyUp吗? 是否可以在不按下键( onKeyDown )的情况下释放键( onKeyUp )? 这有点令人困惑,有人可以帮我解决这个问题吗? 回答1 在此处查看此答案中最初使用的存档链接。 从该链接: 从理论上讲, onKeyDown和onKeyUp事件表示正在按下或释放的键,而onKeyPress事件则表示正在键入的字符。 该理论的实现并非在所有浏览器中都相同。 回答2 注意现在不推荐使用KeyPress 。 请改用KeyDown 。 KeyPress , KeyUp和KeyDown分别类似于: Click , MouseUp,和MouseDown 。 Down首先发生 Press发生第二次(输入文本时) Up发生最后一次(当文本输入完成时)。 webkit例外,其中有一个额外的事件: keydown keypress textInput keyup 以下是您可以用来查看事件触发时的摘要: window.addEventListener("keyup", log); window
  • 如何防止ENTER键提交Web表单?(How to prevent ENTER keypress to submit a web form?)
    问题 如何防止ENTER键在基于Web的应用程序中提交表单? 回答1 [2012年修订版,没有内联处理程序,保留textarea输入处理内容] function checkEnter(e){ e = e || event; var txtArea = /textarea/i.test((e.target || e.srcElement).tagName); return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13; } 现在,您可以在表单上定义按键处理程序: <form [...] onkeypress =“ return checkEnter(event)”> document.querySelector('form').onkeypress = checkEnter; 回答2 这是一个jQuery处理程序,可以用来停止输入提交,也可以停止退格键-> back。 “ keyStop”对象中的(keyCode:选择器字符串)对用于匹配不应触发其默认操作的节点。 请记住,网络应该是可访问的地方,这违反了键盘用户的期望。 就是说,就我而言,我正在使用的Web应用程序无论如何都不喜欢后退按钮,因此禁用其快捷键是可以的。 “应该输入->提交”的讨论很重要,但与提出的实际问题无关。 这是代码
  • jquery 自动完成触发下拉输入:焦点(jquery autocomplete trigger dropdown on input:focus)
    问题 我正在使用下面流行的 JQuery 自动完成插件。 http://jqueryui.com/demos/autocomplete/ 目前,如果您输入一个短语,下拉菜单会出现,但当您点击它时它会隐藏。 这可以。 但是,恢复下拉菜单的唯一方法是单击输入字段并键入更多字符或按下 keydown。 关于如何在用户单击输入字段时触发结果下拉列表的任何想法? 我试图触发输入字段的焦点事件,但这不起作用。 当输入字段被聚焦时,我不知何故需要手动调用自动完成下拉事件。 谢谢。 回答1 工作演示http://jsfiddle.net/CNYCS/ 凉爽的; 所以你需要做的就是bind焦点事件与自动完成bind ,rest `自动完成将从那里接管,正如你在演示中看到的那样。 有用的链接:http://forum.jquery.com/topic/how-to-bind-focus-input-to-trigger-autocomplete & http://docs.jquery.com/UI/Autocomplete#method-search 希望这可以帮助, 其余代码在 jsfiddle 中。 代码 $( "#tags" ).autocomplete({ source: availableTags, minLength:0 }).bind('focus', function(){ $
  • AngularJS浏览器通过使用指令自动填充的解决方法(AngularJS browser autofill workaround by using a directive)
    问题 在AngularJS中提交表单并使用浏览器时,请记住密码功能,并且在随后的登录尝试中,让浏览器使用用户名和密码填写登录表单,不会根据自动填充更改$scope模型。 我发现的唯一肮脏的技巧是使用以下指令: app.directive("xsInputSync", ["$timeout" , function($timeout) { return { restrict : "A", require: "?ngModel", link : function(scope, element, attrs, ngModel) { $timeout(function() { if (ngModel.$viewValue && ngModel.$viewValue !== element.val()) { scope.apply(function() { ngModel.$setViewValue(element.val()); }); } console.log(scope); console.log(ngModel.$name); console.log(scope[ngModel.$name]); }, 3000); } }; }]); 问题是ngModel.$setViewValue(element.val()); 不会更改模型或基于element.val()返回值的视图。
  • Jquery datepicker 更改事件触发器和输入的默认更改事件(Jquery datepicker change event trigger and input's default change event)
    问题 我有日期选择器 <input type='text' class='inp'> <script> $('.inp').datepicker(); $(".inp").on("change",function (){ console.log('inp changed'); }); </script> 当我第一次更改 '.inp' 时手动输入一个值,然后我立即单击 datepicker 打开的日历。 我得到两个“更改”事件侦听器。 首先是手动更改,然后是日期选择器更改。 我怎样才能避免这种情况? 回答1 设置您的输入readOnly ,它将帮助您仅通过图标更改字段的值。 <input type='text' class='inp' readOnly /> 然后使用onSelect获取所选日期,如下所示: $(function() { $(".inp").datepicker({ onSelect: function(dateText, inst) { // alert(dateText); } }); }); 回答2 尝试使用 onSelect 函数,例如: $(function() { $( ".datepicker" ).datepicker({ onSelect: function() { //your code here }})
  • 使用输入类型=“文件”字段和.change()事件上传文件时,IE和Chrome中不会始终触发该文件[重复](Upload files using input type=“file” field with .change() event not always firing in IE and Chrome [duplicate])
    问题 这个问题已经在这里有了答案: 输入类型为“ file”的jQuery更改方法(3个答案) 3年前关闭。 我有简单的代码可以上传文件: $(document).ready(function () { $(".attachmentsUpload input.file").change(function () { $('form').submit(); }); }); <form class="attachmentsUpload" action="/UploadHandler.ashx" method="post" enctype="multipart/form-data"> <input type="file" class="file" name="file" /> </form> 当我单击输入,然后在对话框中选择一个文件时,我正在使用ajax提交此文件。 这在这里并不重要。 重要的是,当我第二次在对话框中选择相同的文件时,在提交第一个文件之后,.change()事件不会在IE和Chrome中触发。 但是,当我选择其他文件时,该事件将触发并正常运行。 在Firefox下,它一直在触发。 如何解决此问题,使其按预期工作(如Firefox)? 回答1 描述 发生这种情况的原因是,如果再次选择相同的文件,则输入字段(选定的文件路径)的值不会更改。 您可以将onChange(