Javascript Jquery:如何在用户清除文本框时触发事件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4403444/
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 : how to trigger an event when the user clear a textbox
提问by trrrrrrm
i have a function that currently working on .keypress event when the user right something in the textbox it do some code, but i want the same event to be triggered also when the user clear the textbox .change doesn't help since it fires after the user change the focus to something else
我有一个当前正在处理 .keypress 事件的函数,当用户在文本框中正确执行某些代码时,它会执行一些代码,但我希望在用户清除文本框时也触发相同的事件。更改无济于事,因为它在之后触发用户将焦点更改为其他内容
Thanks
谢谢
回答by Jonathon Bolster
The keyup
event will detect if the user has cleared the box as well (i.e. backspace raises the event but backspace does not raise the keypress
event in IE)
该keyup
事件将检测用户是否也清除了该框(即退格会引发事件但退格不会引发keypress
IE 中的事件)
$("#inputname").keyup(function() {
if (!this.value) {
alert('The box is empty');
}
});
As Josh says, this gets fired for every character code that is pressed in the input. This is mostly just showing that you need to use the keyup event to trigger backspace, rather than the keypress
event you are currently using.
正如 Josh 所说,对于输入中按下的每个字符代码,它都会被触发。这主要只是表明您需要使用 keyup 事件来触发退格,而不是keypress
您当前正在使用的事件。
回答by Gonfi den Tschal
The solution by Jonathon Bolster does not cover all cases. I adapted it to also cover modifications by cutting and pasting:
Jonathon Bolster 的解决方案并未涵盖所有情况。我对其进行了修改,以涵盖通过剪切和粘贴进行的修改:
$("#inputname").on('change keyup copy paste cut', function() {
//!this.value ...
});
see http://jsfiddle.net/gonfidentschal/XxLq2/
见http://jsfiddle.net/gonfidentschal/XxLq2/
Unfortunately it's not possible to catch the cases where the field's value is set using javascript. If you set the value yourself it's not an issue because you know when you do it... but when you're using a library such as AngularJS that updates the view when the state changes then it can be a bit more work. Or you have to use a timer to check the value.
不幸的是,无法捕捉使用 javascript 设置字段值的情况。如果您自己设置值,这不是问题,因为您知道何时执行此操作……但是当您使用诸如 AngularJS 之类的库在状态更改时更新视图时,则可能需要更多工作。或者您必须使用计时器来检查该值。
Also see the answer for Detecting input change in jQuery?which suggests the 'input' event understood by modern browsers. So just:
另请参阅检测 jQuery 中的输入更改的答案?这表明现代浏览器可以理解“输入”事件。所以就:
$("#inputname").on('input', function() {
//!this.value ...
});
回答by Rose
Another way that does this in a concise manner is listening for "input" event on textarea/input-type:text fields
另一种以简洁方式执行此操作的方法是侦听 textarea/input-type:text 字段上的“输入”事件
/**
* Listens on textarea input.
* Considers: undo, cut, paste, backspc, keyboard input, etc
*/
$("#myContainer").on("input", "textarea", function() {
if (!this.value) {
}
});
回答by NJENGAH
You can check the value of the input field inside the on input' function() and combine it with an if/else statement and it will work very well as in the code below :
您可以检查 on input' function() 中输入字段的值并将其与 if/else 语句结合使用,它将在下面的代码中工作得很好:
$( "#myinputid" ).on('input', function() {
if($(this).val() != "") {
//Do action here like in this example am hiding the previous table row
$(this).closest("tr").prev("tr").hide(); //hides previous row
}else{
$(this).closest("tr").prev("tr").show(); //shows previous row
}
});
回答by brandon.rowe
Inside your .keypress or .keyup function, check to see if the value of the input is empty. For example:
在 .keypress 或 .keyup 函数中,检查输入的值是否为空。例如:
$("#some-input").keyup(function(){
if($(this).val() == "") {
// input is cleared
}
});
<input type="text" id="some-input" />