jQuery - 关于更改输入文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10438369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - on change input text
提问by Marko Cakic
I am trying to make a function which will execute when the value of a text input fieldis changed. The value of the field changes when a table cell is clicked, not on keyup, nor paste. I tried it like this:
我正在尝试创建一个函数，该函数将在 a 的值text input field更改时执行。单击表格单元格时，字段的值会更改，而不是单击keyup，也不会粘贴。我是这样试的：
$("#kat").change(function(){
alert("Hello");
});
And I have the text field:
我有文本字段：
<input type="text" id="kat" value="0"/>
but it isn't working. Any help?
但它不起作用。有什么帮助吗？
回答by aldux
This is from a comment on the jQuery documentation page:
这是来自 jQuery 文档页面的评论：
In older, pre-HTML5 browsers, "keyup" is definitely what you're looking for.
In HTML5 there is a new event, "input", which behaves exactly like you seem to think "change" should have behaved - in that it fires as soon as a key is pressed to enter information into a form.
$('element').bind('input',function);
在较旧的 HTML5 之前的浏览器中，“keyup”绝对是您要找的东西。
在 HTML5 中，有一个新事件“input”，它的行为与您似乎认为“change”应该有的行为完全一样——只要按下一个键将信息输入到表单中，它就会触发。
$('元素').bind('输入',函数);
回答by Selvakumar Arumugam
Seems to me like you are updating the value of the text field in javascript. onchangeevent will be triggered only when you key-in data and tab out of the text field.
在我看来，您正在更新 javascript 中文本字段的值。onchange仅当您键入数据并跳出文本字段时才会触发事件。
One workaround is to trigger the textbox change event when modifying the textbox value from the script. See below,
一种解决方法是在从脚本修改文本框值时触发文本框更改事件。见下文，
$("#kat").change(function(){
alert("Hello");
});
$('<tab_cell>').click (function () {
$('#kat')
.val($(this).text()) //updating the value of the textbox
.change(); //trigger change event.
});
回答by solublefish
This technique is working for me:
这种技术对我有用：
$('#myInputFieldId').bind('input',function(){
alert("Hello");
});
Note that according to this JQuery doc, "on" is recommended rather than bind in newer versions.
请注意，根据此 JQuery 文档，在较新版本中建议使用“on”而不是绑定。
回答by M S
This worked for me
这对我有用
var change_temp = "";
$('#url_key').bind('keydown keyup',function(e){
if(e.type == "keydown"){
change_temp = $(this).val();
return;
}
if($(this).val() != change_temp){
// add the code to on change here
}
});
回答by Adauto
The jQuery documentation says this "It is also displayed [the handler execution result] if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered.".
jQuery 文档说：“如果您更改字段中的文本然后单击离开，它也会显示[处理程序执行结果]。如果该字段失去焦点而内容没有更改，则不会触发该事件。”。
Try the keyup and keydown events, like this:
尝试 keyup 和 keydown 事件，如下所示：
$("#kat").keydown(function(){
alert("Hello");
});
回答by priyanka
function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);
if(query_value !== ''){
$.ajax({
type: "POST",
url: "search.php",
data: { query: query_value },
cache: false,
success: function(html){
//alert(html);
$("ul#results").html(html);
}
});
}return false;
}
$("input#search").live("keyup", function(e) {
clearTimeout($.data(this, 'timer'));
var search_string = $(this).val();
if (search_string == '') {
$("ul#results").fadeOut();
$('h4#results-text').fadeOut();
}else{
$("ul#results").fadeIn();
$('h4#results-text').fadeIn();
$(this).data('timer', setTimeout(search, 100));
};
});
and the html
<input id="search" style="height:36px; font-size:13px;" type="text" class="form-control" placeholder="Enter Mobile Number or Email" value="<?php echo stripcslashes($_REQUEST["string"]); ?>" name="string" />
<h4 id="results-text">Showing results for: <b id="search-string">Array</b></h4>
<ul id="results"></ul>
回答by Ehsan Karami
I recently was wondering why my code doesn't work, then I realized, I need to setup the event handlers as soon as the document is loaded, otherwise when browser loads the code line by line, it loads the JavaScript, but it does not yet have the element to assign the event handler to it. with your example, it should be like this:
我最近想知道为什么我的代码不起作用，然后我意识到，我需要在加载文档后立即设置事件处理程序，否则当浏览器逐行加载代码时，它会加载 JavaScript，但它不会还具有将事件处理程序分配给它的元素。用你的例子，它应该是这样的：
$(document).ready(function(){
$("#kat").change(function(){
alert("Hello");
});
});
回答by Rashad Annara
Try this,
尝试这个，
$('#kat').on('input',function(e){
alert('Hello')
});
回答by Pierre
This works for me on all browsers and Jquery <= v1.10
这适用于所有浏览器和 Jquery <= v1.10
$('#kat').on('keyup', function () {
alert("Hello");
});
or as it seems you want
或者像你想要的那样
$('#kat').on('click', function () {
alert("Hello");
});
Textbox input field change event fires as you would expect it to, the jQuery .Change event only works correctly on html5 supported browsers
文本框输入字段更改事件按您的预期触发，jQuery .Change 事件仅在支持 html5 的浏览器上正常工作
回答by Todd Davis
That is working for me. Could be a browser issue as mentioned, or maybe jQuery isn't registered properly, or perhaps the real issue is more complicated (that you made a simpler version to ask this). PS - did have to click out of the text box to make it fire.
这对我有用。可能是前面提到的浏览器问题，或者 jQuery 没有正确注册，或者真正的问题可能更复杂（您制作了一个更简单的版本来询问这个问题）。PS - 确实必须单击文本框才能使其触发。
