jQuery 检测更改的输入文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6153047/
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
Detect changed input text box
提问by Devil's Advocate
I've looked at numerous other questions and found very simple answers, including the code below. I simply want to detect when someone changes the content of a text box but for some reason it's not working... I get no console errors. When I set a breakpoint in the browser at the change()function it never hits it.
我查看了许多其他问题并找到了非常简单的答案，包括下面的代码。我只是想检测何时有人更改了文本框的内容但由于某种原因它不起作用......我没有收到控制台错误。当我在浏览器中的change()函数处设置断点时，它永远不会命中它。
$('#inputDatabaseName').change(function () {
alert('test');
});
<input id="inputDatabaseName">
回答by Ouadie
You can use the inputJavascript eventin jQuery like this:
您可以像这样在 jQuery 中使用inputJavascript 事件：
$('#inputDatabaseName').on('input',function(e){
alert('Changed!')
});
In pure JavaScript:
在纯 JavaScript 中：
document.querySelector("input").addEventListener("change",function () {
alert("Input Changed");
})
Or like this:
或者像这样：
<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>
回答by Scott Harwell
try keyup instead of change.
尝试使用 keyup 而不是更改。
<script type="text/javascript">
$(document).ready(function () {
$('#inputDatabaseName').keyup(function () { alert('test'); });
});
</script>
回答by azerafati
Each answer is missing some points, so here is my solution:
每个答案都缺少一些要点，所以这是我的解决方案：
$("#input").on("input", function(e) {
var input = $(this);
var val = input.val();
if (input.data("lastval") != val) {
input.data("lastval", val);
//your change action goes here
console.log(val);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>The Input Eventfires on Keyboardinput, Mouse Drag, Autofilland Copy-Pastetested on Chrome and Firefox.
Checking for previous value makes it detect real changes, which means not firing when pasting the same thing or typing the same character or etc.
在 Chrome 和 Firefox 上测试的键盘输入、鼠标拖动、自动填充和复制粘贴的Input Event触发。检查以前的值使其检测到真正的变化，这意味着在粘贴相同的内容或输入相同的字符等时不会触发。
Working example: http://jsfiddle.net/g6pcp/473/
工作示例：http: //jsfiddle.net/g6pcp/473/
update:
更新：
And if you like to run your change functiononly when user finishes typingand prevent firing the change action several times, you could try this:
如果您change function只想在用户完成输入并防止多次触发更改操作时运行您的操作，您可以尝试以下操作：
var timerid;
$("#input").on("input", function(e) {
var value = $(this).val();
if ($(this).data("lastval") != value) {
$(this).data("lastval", value);
clearTimeout(timerid);
timerid = setTimeout(function() {
//your change action goes here
console.log(value);
}, 500);
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">If user starts typing (e.g. "foobar") this code prevents your change actionto run for every letter user types and and only runs when user stops typing, This is good specially for when you send the input to the server (e.g. search inputs), that way server does only onesearch for foobarand not six searches for fand then foand then fooand fooband so on.
如果用户开始输入（例如“foobar”），此代码会阻止您change action为用户输入的每个字母运行，并且仅在用户停止输入时运行，这特别适用于将输入发送到服务器（例如搜索输入）时，即路服务器确实只有一个搜索foobar和不是6搜索f，然后fo再foo和foob等。
回答by Matt Ball
回答by Saumil
onkeyup, onpaste, onchange, oninputseems to be failing when the browser performs autofill on the textboxes. To handle such a case include "autocomplete='off'" in your textfield to prevent browser from autofilling the textbox,
onkeyup, onpaste, onchange, oninput当浏览器对文本框执行自动填充时，似乎失败了。要处理这种情况autocomplete='off'，请在文本字段中包含“ ”，以防止浏览器自动填充文本框，
Eg,
例如，
<input id="inputDatabaseName" autocomplete='off' onchange="check();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />
<script>
function check(){
alert("Input box changed");
// Things to do when the textbox changes
}
</script>
回答by kmxr
In my case, I had a textbox that was attached to a datepicker. The only solution that worked for me was to handle it inside the onSelect event of the datepicker.
就我而言，我有一个附加到日期选择器的文本框。对我有用的唯一解决方案是在日期选择器的 onSelect 事件中处理它。
<input type="text" id="bookdate">
$("#bookdate").datepicker({
onSelect: function (selected) {
//handle change event here
}
});
回答by Yoosaf Abdulla
I think you can use keydowntoo:
我认为你也可以使用keydown：
$('#fieldID').on('keydown', function (e) {
//console.log(e.which);
if (e.which === 8) {
//do something when pressing delete
return true;
} else {
//do something else
return false;
}
});
回答by guaroa mendez
WORKING:
在职的：
$("#ContentPlaceHolder1_txtNombre").keyup(function () {
var txt = $(this).val();
$('.column').each(function () {
$(this).show();
if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
$(this).hide();
}
});
//}
});
