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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 12:17:06  来源:igfitidea点击:

Jquery : how to trigger an event when the user clear a textbox

javascriptjquery

提问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 keyupevent will detect if the user has cleared the box as well (i.e. backspace raises the event but backspace does not raise the keypressevent in IE)

keyup事件将检测用户是否也清除了该框(即退格会引发事件但退格不会引发keypressIE 中的事件)

$("#inputname").keyup(function() {

    if (!this.value) {
        alert('The box is empty');
    }

});

jsFiddle

js小提琴

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 keypressevent 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
         }
    });

enter image description here

在此处输入图片说明

回答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" />