23

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

Thanks

trrrrrrm
  • 11,362
  • 25
  • 85
  • 130
  • No solution here fix the situation if you use type="search" and the default clear button. – luky Oct 08 '16 at 13:23

5 Answers5

51

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)

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

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

});

jsFiddle

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.

BomberMan
  • 1,094
  • 3
  • 13
  • 33
Jonathon Bolster
  • 15,811
  • 3
  • 43
  • 46
  • Yup - you're right. It was more pointing out that the keyup event should be used, as the OP says they have the code in a keypress event already (which backspace doesn't raise). – Jonathon Bolster Dec 09 '10 at 21:57
  • Thanks a lot mate. I was trying with keypress which was not generating event for me. – Sunil Kartikey May 24 '12 at 13:07
  • 5
    It's worth pointing out that keyup/keypress will not catch actions that involve only the mouse (highlight all, right click, cut) – ctb Sep 03 '13 at 18:32
24

The solution by Jonathon Bolster does not cover all cases. I adapted it to also cover modifications by cutting and pasting:

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

see 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.

Also see the answer for Detecting input change in jQuery? which suggests the 'input' event understood by modern browsers. So just:

$("#inputname").on('input', function() {
    //!this.value ...
});
Community
  • 1
  • 1
Gonfi den Tschal
  • 1,754
  • 1
  • 20
  • 29
3

Another way that does this in a concise manner is listening for "input" event on textarea/input-type:text fields

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

    }
});
Rose
  • 2,792
  • 4
  • 28
  • 42
3

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 :

$( "#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

NJENGAH
  • 955
  • 15
  • 12
0

Inside your .keypress or .keyup function, check to see if the value of the input is empty. For example:

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

<input type="text" id="some-input" />
brandon.rowe
  • 11
  • Not sure why this is marked down. I used a variation : $("#UserNameOrSchoolNameK").on('change keyup copy paste cut', function () { if ($(this).val() == "") { alert('xxx111'); } }); (I marked the answer back up from -1 to 0) – CYoung Sep 04 '19 at 04:39