Geek Answers Handbook

How to detect invisible keys (ENTER, F1, SHIFT) in general using JS or jQuery?

First of all, I'm sorry, I do not know what to call these keys (ENTER, F1, HOME, etc.).

In fact, I am creating an input box that onkeyup calls a function. When a user enters at least two keys, my function is called and the corresponding search results are displayed using AJAX. The problem is that the user presses the arrow keys, HOME, END, etc., Then also my ajax is called, which I do not want. And pressing the F5 key to reload the page while focusing on the input does not reload the page, instead it calls AJAX, so this is a big problem for me.

$('input[name=\'search\']').on(keyup, function(e) { if ($('input[name=\'search\']').val().length >= 2) { // call ajax to display results.. } });

I want to add an extra expression in if that checks if an invisible key is pressed or not. How -

 if ($('input[name=\'search\']').val().length >= 2 && (EXPRESSION FOR VISIBLE KEYS)) { // call ajax to display results.. }

If any visible key is pressed, ajax is called, otherwise it is not.

I do not know how to achieve this. Since I can not do e.keycode == '65' for each key, such as A, B, C, \, =, +, 1,2,3, etc.

Is there a ready-made library for checking this or any other way to do this? Please help me.

+6
source share
4 answers

I have another solution to check if a visible character key is pressed. In fact, the main thing that I used in my code is that the keys of the visible character, when pressed, change the length value of the input field value. I used keydown instead of keyup to get the length of the string just before pressing the current key. Look at my code -

 $('input[name=\'search\']').on('keydown', function() { var orig_len = $('input[name=\'search\']').val().length; // this gets the original length just before the key was pressed setTimeout(function() { if ($('input[name=\'search\']').val().length >= 2 && $('input[name=\'search\']').val().length != orig_len) { // my ajax call }, 25); /* in 25ms the lenght is updated and the if checks whether length has changed from previous or not because visible char key changes length */ });

setTimeout was necessary because this time elapsed after 25 ms was more than enough to update the length of the input field after pressing the current key.

Please discuss this and tell me that it is normal or not, or have a bad effect or can cause problems in different browsers, since I have not tested it in other browsers yet.

UPDATE: it is fully functional for all major browsers. His work was what I wanted.

+1
source

You can check if e.which or e.keyCode between 48 and 90, which matches any number or letter of the alphabet. http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

if (+e.which >= 48 && +e.which <=90){ ... }

If you want to support others that arnt are just alphanumeric, the easiest way I see is to create an array of all the key codes that you want to use in the white list and check if the array contains a key code. this is a good thread on how to do this: How to find an array containing a specific string in JavaScript / jQuery?

+3
source

The keyCode event is your answer:

 $('input[name=\'search\']').keyup(function(event) { console.log( event.keyCode ); });

For example, the keyCode key for Enter is 13. You can also check the Ctrl , Shift, and Alt keys for the following variables:

 if(event.ctrlKey) { if (event.ctrlLeft) { console.log('ctrl-left'); } else { console.log('ctrl-right'); } } event.altKey ... event.altLeft ... event.shiftKey ...

To accept only letters, you can use this method:

 var letter = String.fromCharCode(e.which); if (/[az\d]/i.test(letter)) { // send ajax call }
+2
source

Another answer is a good JavaScript component for implementing an advanced search box like TypeAhead component, simple peasy;)

Please take a look at: https://twitter.imtqy.com/typeahead.js/examples/

0
source

More articles:


All Articles