Jquery ajax perform only on certain keys

Question

I made a script that sends information from the input to a script whenever a keyup happens. The problem is that it sends a request whenever any key is pressed(obviously). This means that some requests, when for instance arrow keys are pressed, are done for nothing. Is there a way to remove such requests or it doesn't matter if they happen?

$('input[name="rusername"]').on("focus keyup", function() {

    // if ($(this).val() === '') $('#rusererr').html('Enter your desired username; between 8 and 32 characters');

    var username = $(this).val();

    $.post("register.php", {
        rusername: username
    }, function(stuff) {
        //daca nu sunt erori
        if (stuff==='1') alert(stuff);
        else alert(stuff);
    });
});

simply enclose the `post` call in a condition which filters the desired keycodes - or better - do the call after the input field lost focus (which is most likely a good sign, that the user achieved their desired result). — Christoph, Oct 09 '14 at 13:19
Closely related to [jQuery Event Keypress: Which key was pressed?](http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed) (that's for `keypress` instead of `keyup`, though; I'm not sure their normalized behavior is 100% the same, though) — apsillers, Oct 09 '14 at 13:23
For performance reasons you absolutely *should not* send and ajax request on the keyup event - use a more generic event instead. — Christoph, Oct 09 '14 at 13:38
Which one? I could use blur, but if I'd be to match two password fields, they wouldn't match until the user leaves the second field. — George Irimiciuc, Oct 09 '14 at 13:39

score 1 · Accepted Answer · answered Oct 09 '14 at 13:19

1

Check the keycodes:

$('input[name="rusername"]').on("focus keyup", function(e) {
    var keyCode = e.which;
    if (keyCode != 13) {
        //AJAX
    } else {
        return;
    }
});

I used 13 as an example, you'll have to lookup which keycodes you want to exclude.

answered Oct 09 '14 at 13:19

tymeJV

103,943
14
161
157

I see. Thought there might be some functionality that excludes it automatically. – George Irimiciuc Oct 09 '14 at 13:21
Nope... `keyup` does exactly that, fires on any key up :D. You can always make an array of bad keycodes and check the index of the current keycode against that array. – tymeJV Oct 09 '14 at 13:21

score 0 · Answer 2 · answered Oct 09 '14 at 13:22

0

Check the keycode for some of the key.

Enter: 13
Up: 38
Down: 40
Right: 39
Left: 37
Esc: 27
SpaceBar: 32
Ctrl: 17
Alt: 18
Shift: 16

answered Oct 09 '14 at 13:22

Aravind Sivam

1,089
8
23

score 0 · Answer 3 · answered Oct 09 '14 at 13:24

You can do this

var exclude = [37, 38, 39, 40] // arrow keys, you can add more. 
$('input[name="rusername"]').on("focus keyup", function(e) {
    var keyCode = e.which || e.keyCode;
    if (exclude.indexOf(keyCode) == -1) {
        // do ajax here
    } else { return; }
});

score 0 · Answer 4 · answered Oct 09 '14 at 13:25

Why do you want to send an ajax request on every key action?

Sending an ajax request only on the blur event of the input greatly reduces the number of AJAX calls and does not need to mess around with keycodes (keycodes are a very tough topic!). And if you absolutely have to, save the results in between in localStorage where it does not matter that much if you do some nonsense save operations.

$("#input").on("blur",function(){
  $("#result").html("An Ajax call would be triggered now!");
});

$("#input").on("keyup",function(){
  $("#result").html("The following string will be save locally: "+this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text">
<br><br>
<div id="result">
  
  </div>

Jquery ajax perform only on certain keys

4 Answers4