How to avoid delay on startup using jQuery?

Question

TASK:

When the user enters a character in the text box, create a button. When the user clears the text field using the backspace key, but holds this key for a few extra seconds, immediately hide the button.

QUESTION:

If the user enters one character and uses the backspace to delete it, holding the backspace key for a few extra seconds, before the button is hidden, there is a delay. This only happens when the user enters only one character, and then holds the backspace key without releasing it. If instead the user typed several characters and then held the backspace key until the text field 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.net/odkut0dh/

Answer 1

A bit of a step-by-step situation:

Assuming the value of <input> is "x" , and you enter backspace:
- When the keydown event fires, the input value is still "x" .
- When keypress , it is still "x" .
If you do not release the key:
__ keydown fires again, after some delay, _{depending on os, I think} now the value is "" .
__ keypress works again, the value is still "" .
__ When you release the key, keyup fires, the value is "" .
If you do, release the key:
__ keypress works directly, the value is "" .

Solution For IE10 +, you should use the input event, which will fire when the content of the textEditable element changes or, as suggested by @Mayhem, the change event, which will not even listen to key input and has 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.com/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> 

Answer 2

As I already made comments on this, I made a quick google and came across this post, which could make it a little easier. Detect all changes to <input type = "text"> (immediately) using jQuery

So, I put the fiddle here for testing: Minor modified version

HTML

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

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 don’t need a lot of time to partition this code ... In appearance .. You don’t need elem.data ... Just a binding event ... ... oh, it looks like I decided to cut the code for you. ..

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

The shortest version I could make from the above example

HTML

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

Js

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

I quickly checked this for chrome .. the mouse keys / functions all seem to affect it correctly ... Other browsers I will leave before the OP for testing. Let me know if there are any problems in a specific browser ..

IE10 seems to be minimal support for this. IE9 may have a js prototype. But how important is it to support your project? to support IE <10 <

Answer 3

The problem is that $ ('# tbox'). val (); is not empty ('') when the backspace button is pressed. Therefore, you need to defer checking the value.

When you press the key, the first thing that happens is that the keydown event is fired, after which the key will be executed in the input field.

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

Answer 4

You can prevent repeated keystrokes by controlling the key with a 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; });