Jquery：当用户清除文本框时如何触发事件答案

【问题标题】：Jquery : how to trigger an event when the user clear a textboxJquery：当用户清除文本框时如何触发事件
【发布时间】：2011-05-23 03:39:32
【问题描述】：

我有一个当前正在处理 .keypress 事件的函数，当用户对文本框中的某些内容进行正确处理时，它会执行一些代码，但我希望在用户清除文本框时也触发相同的事件 .change 无济于事，因为它在用户将焦点更改为其他内容后触发

谢谢

【问题讨论】：

如果你使用 type="search" 和默认的清除按钮，这里没有解决方案。

标签： javascript jquery

【解决方案1】：

keyup 事件将检测用户是否也清除了该框（即退格键引发事件，但退格键不会引发 IE 中的keypress 事件）

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

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

});

jsFiddle

正如 Josh 所说，对于输入中按下的每个字符代码都会触发此操作。这主要只是表明您需要使用 keyup 事件来触发退格，而不是您当前使用的 keypress 事件。

【讨论】：

是的 - 你是对的。更要指出的是应该使用 keyup 事件，因为 OP 说他们已经在 keypress 事件中有代码（退格不会引发）。
非常感谢伙计。我正在尝试使用没有为我生成事件的按键。
值得指出的是 keyup/keypress 不会捕获仅涉及鼠标的操作（突出显示、右键单击、剪切）

【解决方案2】：

在您的 .keypress 或 .keyup 函数中，检查输入的值是否为空。例如：

$("#some-input").keyup(function(){
 if($(this).val() == "") {
  // input is cleared
 }
});

<input type="text" id="some-input" />

【讨论】：

不知道为什么这被标记了。我使用了一个变体： $("#UserNameOrSchoolNameK").on('change keyup copy paste cut', function () { if ($(this).val() == "") { alert('xxx111'); } }); （我将答案从 -1 标记为 0）

【解决方案3】：

Jonathon Bolster 的解决方案并未涵盖所有情况。我对其进行了调整，以涵盖通过剪切和粘贴进行的修改：

$("#inputname").on('change keyup copy paste cut', function() {
    //!this.value ...
});

见http://jsfiddle.net/gonfidentschal/XxLq2/

不幸的是，无法捕获使用 javascript 设置字段值的情况。如果您自己设置值，这不是问题，因为您知道何时执行此操作……但是当您使用诸如 AngularJS 之类的库时，它会在状态更改时更新视图，那么它可能需要更多的工作。或者您必须使用计时器来检查该值。

另请参阅Detecting input change in jQuery? 的答案，它表明现代浏览器可以理解“输入”事件。所以只是：

$("#inputname").on('input', function() {
    //!this.value ...
});

【讨论】：

我同意，我正在寻找这个答案！谢谢！
on(input) 不覆盖当用户全选并按删除或退格键时

【解决方案4】：

另一种简洁的方式是在 textarea/input-type:text fields 上监听“input”事件

/**
 * Listens on textarea input.
 * Considers: undo, cut, paste, backspc, keyboard input, etc
 */
$("#myContainer").on("input", "textarea", function() {
    if (!this.value) {

    }
});

【讨论】：

【解决方案5】：

您可以在 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
         }
    });

【讨论】：