JQuery:检测输入字段的变化[重复]
Posted
技术标签:
【中文标题】JQuery:检测输入字段的变化[重复]【英文标题】:JQuery: detect change in input field [duplicate] 【发布时间】:2012-09-29 15:31:18 【问题描述】:我想检测用户的键盘操作何时改变了文本字段的值。它应该在现代浏览器中始终如一地工作。
.keypress 事件的 JQuery 页面说它不一致?此外,它不适用于退格、删除等。
我不能使用 .keydown,因为它会对 shift、alt 和箭头键等做出反应。此外,当用户按住一个键并插入多个字符时,它不会触发多次。
我缺少一个简洁的方法吗?或者我应该使用 .keydown 并过滤掉由箭头键、shift 等触发的事件?我主要担心的是会有一些我不知道应该被过滤的键。 (我差点忘记了 alt 和 ctrl,我想可能还有其他的)但是我如何检测到按住并插入多个字符的键呢?
作为奖励,它会检测到由于粘贴(包括右键单击)而导致的更改,但我有来自 here 的解决方案。
【问题讨论】:
【参考方案1】:您可以将“输入”事件绑定到文本框。这会触发每次输入更改,因此当您粘贴某些内容(即使右键单击)时,删除并输入任何内容。
$('#myTextbox').on('input', function()
// do something
);
如果您使用change
处理程序,它只会在用户取消选择输入框后触发,这可能不是您想要的。
这里有一个例子:http://jsfiddle.net/6bSX6/
【讨论】:
这在 Nintendo 3DS 浏览器中不起作用。即使输入字段包含新字符串,也不会检测到更改。 @Gatada 我很高兴我的雇主没有让我验证 Nintendo 3DS 浏览器的网络代码。 这对于在初始页面加载后生成的输入字段将失败,例如流行的 select2 插件 @Sliq 可以通过将其更改为$(document).on("input", "#myTextbox", function() ...)
来修复。这将触发具有此 ID 的所有运行时生成的输入。
@Timm,如果我通过 Jquery 设置输入 #myTextbox 的值,例如 `$('#myTexbox').val('some_value') ,这会起作用吗?谢谢【参考方案2】:
使用jquerychange event
说明:将事件处理程序绑定到“更改”javascript 事件, 或在元素上触发该事件。
一个例子
$("input[type='text']").change( function()
// your code
);
.change
与 .keypress
、.focus
、.blur
相比的优势在于,.change
事件仅在输入发生变化时触发
【讨论】:
它是否适用于选择下拉菜单?【参考方案3】:我最近使用以下函数实现了相同的功能。
我想在编辑时启用保存按钮。
-
不建议更改事件,因为只有在编辑后,在单击“保存”按钮之前在页面上的其他位置单击鼠标时才会触发更改事件。
按键不处理退格、删除和粘贴选项。
Key Up 处理所有内容,包括 Tab、Shift 键。
因此我写了下面的函数,结合了按键、keyup(用于退格、删除)和文本字段的粘贴事件。
希望对你有帮助。
function checkAnyFormFieldEdited()
/*
* If any field is edited,then only it will enable Save button
*/
$(':text').keypress(function(e) // text written
enableSaveBtn();
);
$(':text').keyup(function(e)
if (e.keyCode == 8 || e.keyCode == 46) //backspace and delete key
enableSaveBtn();
else // rest ignore
e.preventDefault();
);
$(':text').bind('paste', function(e) // text pasted
enableSaveBtn();
);
$('select').change(function(e) // select element changed
enableSaveBtn();
);
$(':radio').change(function(e) // radio changed
enableSaveBtn();
);
$(':password').keypress(function(e) // password written
enableSaveBtn();
);
$(':password').bind('paste', function(e) // password pasted
enableSaveBtn();
);
【讨论】:
确实,keyup
似乎是唯一可以检测退格和删除操作的(不是keypress
或keydown
),至少在 IE 8 和 IE 9 中是这样。谢谢。跨度>
【参考方案4】:
使用$.on()
将您选择的事件绑定到输入,不要使用$.keydown()
等快捷方式,因为从jQuery 1.7 开始$.on()
是附加事件处理程序的首选方法(参见此处:http://api.jquery.com/on/和http://api.jquery.com/bind/)。
$.keydown()
只是$.bind('keydown')
的快捷方式,$.bind()
是$.on()
的替代品(以及其他)。
据我所知,要回答您的问题,除非您需要专门在 keydown
上触发事件,否则 change
事件应该可以为您解决问题。
$('element').on('change', function()
console.log('change');
);
为了回复以下评论,此处记录了 javascript change
事件:https://developer.mozilla.org/en-US/docs/Web/Events/change
这是一个使用 jQuery 处理输入元素的 change
事件的工作示例:http://jsfiddle.net/p1m4xh08/
【讨论】:
输入元素上没有“更改”事件 @Daniel 你误会了 - 请参阅 developer.mozilla.org/en-US/docs/Web/Events/change 和 developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/… 抱歉,第二个链接错误 - 请参阅此链接了解更多信息:whatwg.org/specs/web-apps/current-work/multipage/… 所以再次阅读链接,您会看到:“与输入事件不同,更改事件不一定会在每次更改元素值时触发。”这似乎是发布问题的人所需要的 @Daniel 您说没有更改事件,并不是说它不是每次都触发。那是不正确的,是一个更改事件。我也读过文档。显然,建议使用input
事件的选定答案符合 OP 的需求。所选答案还提到了 change
事件以及为什么它可能不是 OP 想要的。【参考方案5】:
你可以使用 jQuery change() 函数
$('input').change(function()
//your codes
);
API 页面上有关于如何使用它的示例:http://api.jquery.com/change/
【讨论】:
注意文本字段仅在模糊时检测到以上是关于JQuery:检测输入字段的变化[重复]的主要内容,如果未能解决你的问题,请参考以下文章