按键事件如何工作？

Question

I want that if my input text value is not empty then show my .removetext div but it doesn't work properly. If you type a something after second character my .removetext is being hidden but if my input is not empty don't hide my .removetext class.

Where is my mistake? I guess I don't understand the keydown event

 $(document).ready(function() { $('.search-hotels').on('input', function() { var val = $.trim(this.value); if (!val == "") { $(".removetext").show(val.length > 0, function() { var clear = $(this); clear.on('click', function() { alert('hey'); }) }); } else { $(".removetext").hide(); } }); }); 

 .main { position: relative; width: 40%; } .search-hotels { width: 100%; padding: 15px; border: 3px solid #ccc; } .removetext { position: absolute; right: 0; top: 25%; font-size: 23px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <input type="text" class="search-hotels"> <div class="removetext">&times;</div> </div> 

Answer 1

You can achieve what you want by using keyup instead of keydown and changing your if statement to the following:

if ($(this).val());

Using keydown means that it will not use the .val that was input but will check the .val before the input is updated because the .val will be updated after the keyup event.

An even better approach would be to use the input event as follows:

 $(document).ready(function() { $('.search-hotels').on('input', function() { if ($(this).val()) { $(".removetext").show(function() { console.log($(this).attr('class')); }); } else { $(".removetext").hide(); } }) }); 

 .main { position: relative; width: 40%; } .search-hotels { width: 100%; padding: 15px; border: 3px solid #ccc; } .removetext { position: absolute; right: 0; top: 25%; font-size: 23px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <input type="text" class="search-hotels"> <div class="removetext">&times;</div> </div> 

Answer 2

Try input - it handles paste too:

 $(function() { $('.search-hotels').on('input', function() { var val = $.trim(this.value); $(".removetext").toggle(val.length>0); // test anything not blank }); // the event handler needs to be HERE and not inside the inout handler $(".removetext").on('click', function() { alert('hey'); }); }); 

 .main { position: relative; width: 40%; } .search-hotels { width: 100%; padding: 15px; border: 3px solid #ccc; } .removetext { position: absolute; right: 0; top: 25%; font-size: 23px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <input type="text" class="search-hotels" value=""> <div class="removetext">&times;</div> </div> 

If you need a callback you do need show and hide

 $(function() { $('.search-hotels').on('input', function() { var show = $.trim(this.value).length>0; if (show) { $(".removetext").show("slow",function() { console.log("showing"); }); } else { $(".removetext").hide("slow",function() { console.log("hiding"); }); } }); }); 

 .main { position: relative; width: 40%; } .search-hotels { width: 100%; padding: 15px; border: 3px solid #ccc; } .removetext { position: absolute; right: 0; top: 25%; font-size: 23px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <input type="text" class="search-hotels" value=""> <div class="removetext">&times;</div> </div> 

Answer 3

Keydown event is fired before a character is typed, hence you should use keyup event which is fired after the character is typed.

Also, !$(this).val() is different than $(this).val()==""

Use if($(this).val()=="")

Answer 4

You should use keyup. Key down registers the key pressed but it hasn't populated the input yet. You can either go through the keydown event properties and use the property "key" (if i remember correctly) to get the value entered during the keydown, but if you want to grab the text in the input, you'll need "keyup"

Answer 5

you can use keyup here better and checking for $(this).val().length would be better.

 $(document).ready(function() { $('.search-hotels').on('keyup', function() { if ($(this).val().length > 0) { $(".removetext").show(function() { console.log($(this).attr('class')); }); } else { $(".removetext").hide(); } }) }); 

 .main { position: relative; width: 40%; } .search-hotels { width: 100%; padding: 15px; border: 3px solid #ccc; } .removetext { position: absolute; right: 0; top: 25%; font-size: 23px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <input type="text" class="search-hotels"> <div class="removetext">&times;</div> </div> 

Answer 6

It should be if ($(this).val()) otherwise your checking if it's empty. Also, use keyup as keydown is capturing your val() before it actually has a value.

 $(document).ready(function() { $('.search-hotels').on('keyup', function() { if ($(this).val()) { $(".removetext").show(function() { console.log($(this).attr('class')); }); } else { $(".removetext").hide(); } }) }); 

 .main { position: relative; width: 40%; } .search-hotels { width: 100%; padding: 15px; border: 3px solid #ccc; } .removetext { position: absolute; right: 0; top: 25%; font-size: 23px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <input type="text" class="search-hotels"> <div class="removetext">&times;</div> </div> 

Answer 7

keydown event fires when the button is pressed, at that moment your value isn't updated, try using keyup event fires when the button is released and the input value is updated...

 $(document).ready(function() { $('.search-hotels').on('keyup', function() { console.log(this,$(this).val()); if ($(this).val()) { $(".removetext").show(function() { console.log($(this).attr('class')); }); } else { $(".removetext").hide(); } }) }); 

 .main { position: relative; width: 40%; } .search-hotels { width: 100%; padding: 15px; border: 3px solid #ccc; } .removetext { position: absolute; right: 0; top: 25%; font-size: 23px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <input type="text" class="search-hotels"> <div class="removetext">&times;</div> </div> 

Answer 8

You should not use keydown event because it is one keypress "behind" of what's written into input value .

Ideally you should use oninput (not even keyup as suggested by everyone, but @mplungjan who was faster :). oninput will also allow you to properly track copy/past events unlike onkeyup.

In addition, read input value by simply this.value but remember to trim it also to get rid of whitespaces.

 $(document).ready(function() { $('.search-hotels').on('input', function() { if (this.value.trim()) { $(".removetext").show(); } else { $(".removetext").hide(); } }) }); 

 .main { position: relative; width: 40%; } .search-hotels { width: 100%; padding: 15px; border: 3px solid #ccc; } .removetext { position: absolute; right: 0; top: 25%; font-size: 23px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <input type="text" class="search-hotels"> <div class="removetext">&times;</div> </div>