检测更改的输入文本框

我还研究了许多其他问题，并找到了非常简单的答案，包括下面的代码。我只是想检测当有人改变文本框的内容，但由于某种原因，它不工作…我没有得到控制台错误。当我在浏览器的change()函数上设置断点时，它永远不会碰到它。

$('#inputDatabaseName').change(function () {
alert('test');
});

<input id="inputDatabaseName">
657453 次浏览
小开

文本输入直到失去焦点才触发change事件。单击输入之外，将显示警报。

如果回调应该在文本输入失去焦点之前触发，则使用.keyup()事件。

小开

试试keyup而不是change。

<script type="text/javascript">
$(document).ready(function () {
$('#inputDatabaseName').keyup(function () { alert('test'); });
});
</script>

这是jQuery官方文档。keyup()。

小开
最佳答案

你可以像这样在jQuery中使用input Javascript事件:

$('#inputDatabaseName').on('input',function(e){
alert('Changed!')
});

在纯JavaScript中:

document.querySelector("input").addEventListener("change",function () {
alert("Input Changed");
})

或者像这样:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>
小开

当浏览器对文本框执行自动填充时，onkeyup, onpaste, onchange, oninput似乎失败了。要处理这种情况，请在文本框中包含"autocomplete='off'"，以防止浏览器自动填充文本框，

例如,

<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>
小开

我认为你也可以使用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;
}
});
小开

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>

在Chrome和Firefox上测试的Input Event在键盘输入，Mouse Drag， 自动填充和复制粘贴上触发。 检查之前的值可以检测真正的变化，这意味着粘贴相同的东西或输入相同的字符等时不会触发

工作示例:http://jsfiddle.net/g6pcp/473/

更新:

如果你想运行你的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">

如果用户开始输入(例如:"foobar")这个代码阻止你的change action对每个字母用户类型运行，并且只在用户停止输入时运行，这特别适用于当你将输入发送到服务器时(例如搜索输入)，这样服务器就会对foobar进行只有一个搜索，而不是对f进行六次搜索，然后是fo，然后是foo和foob等等。

小开

在我的例子中，我有一个附加到日期选择器的文本框。对我来说唯一有效的解决方案是在datepicker的onSelect事件中处理它。

<input type="text"  id="bookdate">


$("#bookdate").datepicker({
onSelect: function (selected) {
//handle change event here
}
});
小开

工作:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
var txt = $(this).val();
$('.column').each(function () {
$(this).show();
if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
$(this).hide();
}
});
//}
});
小开

试试这样的它总是有效的。

$(function() {
$("#my_input").on("change paste keyup", function() {
alert($(this).val());
});
});
小开 
$('#inputDatabaseName').change(function(){
alert('Changed!')
});

Source .


提交答案