GOAL:

When a user types character in a text box, make a button appear. When the user clears the text box using the backspace key but holds down that key for a few extra seconds, hide the button instantly.

ISSUE:

If a user types in a single character, and uses the backspace to remove it—by holding down the backspace key a few extra seconds—there is a delay before the button is hidden. This only happens when the user typed only one character and then held down the the backspace key without letting go. If instead the user typed multiple characters, and then held down the backspace key until the textbox was empty, there was no delay in hiding the button.

<input type="text" id="tbox"></text>
<button type="button" id="btn"  style="display:none;">push me</button>

$('#tbox').on('keydown keypress keyup',function(){
    if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }
});

JSFIDDLE:

/

GOAL:

When a user types character in a text box, make a button appear. When the user clears the text box using the backspace key but holds down that key for a few extra seconds, hide the button instantly.

ISSUE:

If a user types in a single character, and uses the backspace to remove it—by holding down the backspace key a few extra seconds—there is a delay before the button is hidden. This only happens when the user typed only one character and then held down the the backspace key without letting go. If instead the user typed multiple characters, and then held down the backspace key until the textbox was empty, there was no delay in hiding the button.

<input type="text" id="tbox"></text>
<button type="button" id="btn"  style="display:none;">push me</button>

$('#tbox').on('keydown keypress keyup',function(){
    if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }
});

JSFIDDLE:

http://jsfiddle/odkut0dh/

• javascript
• jquery
• delayed-execution

Share Improve this question Follow edited Aug 6, 2015 at 7:51 Bhavesh Jariwala 87588 silver badges2828 bronze badges asked Aug 6, 2015 at 3:59 brooklynswebbrooklynsweb 81733 gold badges1212 silver badges3030 bronze badges 9

• 2 use the input event jsfiddle/odkut0dh/1 – Kaiido Commented Aug 6, 2015 at 4:06
• How about this – Guruprasad J Rao Commented Aug 6, 2015 at 4:10
• 1 You might be better of using something an event onchange...This wont rely on the keystrokes... For example if select the text with the cursor and right click and cut... There is no keystroke.... So key -down/up/press wont do nothing... so you really need to focus more on onchange in this case... or add that to the list of events as well. – Angry 84 Commented Aug 6, 2015 at 4:20
• @Mayhem, included it to my answer, I hope it's fine with you, forgot about some "browsers" lack of support for input event – Kaiido Commented Aug 6, 2015 at 4:27
• Thats fine, rather the user get a detailed answer... I just dont have time atm to write a full example. – Angry 84 Commented Aug 6, 2015 at 4:29

 |  Show 4 more ments

4 Answers 4

Sorted by: Reset to default 4

A little walkthrough the situation :

Assuming that <input> value is "x" and you type backspace :
- When the keydown event fires the input's value is still "x".
- When the keypress fires, it still "x".
If you don't release the key :
__ keydown fires again, after some delay, _{depending on os I guess} value is now "".
__ keypress fires again, value is still "".
__ When you release the key, keyup fires, value is "".
If you do release the key :
__ keypress fires directly, value is "".

The solution For IE10+ is to use the input event which will fire when the textEditable element's content has changed or, as suggested by @Mayhem, the change event, which won't even listen for key inputs and has a better browser support than input

$('#tbox').on('input change',function(e){
    if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tbox"></text>
<button type="button" id="btn"  style="display:none;">push me</button>

As i've aleady made ments on this one, did a quick google and came across this post which might make it a little easier.. Detect all changes to a <input type="text"> (immediately) using JQuery

So i put it into a fiddle here for you to test: Slight Modded Version

The HTML

<input type="text" value="Some Value" id="text1" />
<button id="btn1">Click Me</button>

The JS

 $('#text1').each(function() {
   var elem = $(this);
   elem.data('oldVal', elem.val());
   elem.bind("propertychange change click keyup input paste", function(event){
      if (elem.data('oldVal') != elem.val()) {
          if (elem.val().length == 0 ) {
              $("#btn1").hide();
          } else {
              $("#btn1").show();
          }
       elem.data('oldVal', elem.val());
     }
   });
 });

As i dont have to much time to break this code down into sections... By the looks of it.. You dont need the elem.data... Just the bind event... ... ah seems i decided to shorten the code for you...

http://jsfiddle/z2ew3fqz/3/ Using the same HTML...

Shortest version i could make from the example given above

The HTML

<input type="text" value="Some Value" id="text1" />
<button id="btn1">Click Me</button>

The JS

 $('#text1').bind("propertychange change click keyup input paste", function(event){
     if ($(this).val().length == 0 ) {
         $("#btn1").hide();
     } else {
         $("#btn1").show();
     }
 });

I've quickly tested this on chrome.. mouse/function keys all seem to affect it correctly... Other browsers i'll leave upto the OP to test.. Let me know if any issues in a particular browser..

IE10 seems to be the min support for this .. IE9 might be able to have a js prototype done.. But how important is this for support in your project? to support IE<10?

The Problem is that $('#tbox').val(); is not empty ('') when backspace is pressed. So You have to delay the value check.

When you press down the key, the first thing what happend is that the keydown event is fired, then after that the key action will be performed on the input field.

$('#tbox').on('keydown keypress keyup',function(){
    setTimeout(function () {
          if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }  
},0);

});

You can prevent repeating keydown by control it on key up by an global variable:

var allow = true;
$(document).on('keydown', function(e) { 
  if (e.repeat != undefined) {
    allow = !e.repeat;
  }
  if (!allowed) return;
  allowed = false;

  if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }
});

$(document).keyup(function(e) { 
  allowed = true;
});