我还研究了许多其他问题,并找到了非常简单的答案,包括下面的代码。我只是想检测当有人改变文本框的内容,但由于某种原因,它不工作…我没有得到控制台错误。当我在浏览器的change()函数中设置断点时,它永远不会碰到它。
$('#inputDatabaseName').change(function () {
alert('test');
});
<input id="inputDatabaseName">
我还研究了许多其他问题,并找到了非常简单的答案,包括下面的代码。我只是想检测当有人改变文本框的内容,但由于某种原因,它不工作…我没有得到控制台错误。当我在浏览器的change()函数中设置断点时,它永远不会碰到它。
$('#inputDatabaseName').change(function () {
alert('test');
});
<input id="inputDatabaseName">
试试keyup而不是change。
<script type="text/javascript">
$(document).ready(function () {
$('#inputDatabaseName').keyup(function () { alert('test'); });
});
</script>
下面是.keyup()的官方jQuery文档。
你可以像这样在jQuery中使用输入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'"在你的文本框,以防止浏览器自动填充文本框,
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>
我认为你也可以使用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;
}
});
每个答案都少了一些点,所以下面是我的解决方案:
$(" #输入”)。On ("input",函数(e) { Var input = $(this); Var val = input.val(); If (input.data("lastval") != val) { 输入。数据(“lastval val); //你的更改操作在这里 console.log (val); } }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <input type="text" id="input"> <p>试着拖动字母并复制粘贴</p>
在Chrome和Firefox上测试的键盘输入、鼠标拖动、自动填充和复制粘贴时触发输入事件。 检查之前的值可以检测真正的变化,这意味着粘贴相同的东西或输入相同的字符等时不会触发。
工作示例:http://jsfiddle.net/g6pcp/473/
更新:
如果你想只在用户完成输入时运行你的更改函数,并防止多次触发更改操作,你可以尝试这样做:
var timerid; $(" #输入”)。On ("input",函数(e) { Var值= $(this).val(); If ($(this).data("lastval") != value) { (美元)。数据(“lastval”,价值); clearTimeout (timerid); timerid = setTimeout(函数(){ //你的更改操作在这里 console.log(价值); },500); }; }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <input type="text" id="input">
如果用户开始输入(例如:"foobar")这段代码防止您的更改操作运行为每个字母用户类型,并仅在用户停止输入时运行,这是很好的,特别是当你发送输入到服务器(例如搜索输入),这样服务器只做一个搜索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());
});
});