jQuery: Get last change in input field

Question

I have an input field and I need to figure out what the last character is that the user is typing. This could be the last letter in the input but it could also be anywhere in the input field.

I need something like this:

    var timerid;    
    $("#input").on("propertychange change click keyup input paste",function(e){
        var value = $(this).val();
        if($(this).data("lastval")!= value){
            $(this).data("lastval",value);

            //console.log(difference between lastval and value or something similar to get the last character the user types in the input)

            clearTimeout(timerid);
            timerid = setTimeout(function() {

                //change action
                console.log(value);               
                input_array(value) 

            },400);

        };
    });

Offtopic: you don't want that `if lastval != value` there otherwise if you keep pressing the same key, you'll get multiple (still debounced, but multiple) console.logs for the same key rather than just the final one. — freedomn-m, Feb 16 '16 at 23:11
What would you expect to store in `input_array` if the user pastes in a whole word? Or they select some text and press ctrl-x. You might like to define your requirements a bit clearer other than "last change". Last character typed? Then why do you have `propertychange` and `paste` in your example? — freedomn-m, Feb 16 '16 at 23:14
thanks, It is about the last character the user typed in here. But the input could be used also otherwise like by pasting something in. — buckdanny, Feb 16 '16 at 23:29
You won't get a single "handle all cases" solution as they work differently - eg `keypress` is the key pressed, `paste` is what was pasted (http://stackoverflow.com/questions/11605415/jquery-bind-to-paste-event-how-to-get-the-content-of-the-paste). If it's for some sort of undo/redo/replay, then you'll also need to know the position in the text box and any currently selected characters (eg select first word, then press 'a' removes whole first word, you'd only record that "a" was pressed). Perhaps your best bet is to store a "diff" of before and after. — freedomn-m, Feb 16 '16 at 23:35

score 2 · Answer 1 · answered Apr 19 '18 at 20:49

Another way could be .key

Note it is not supported throughout browsers, see compatibility details.

$('input').on('keydown', function(event) {
    console.log(event.key);
});

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

score 1 · Accepted Answer · answered Feb 16 '16 at 22:54

1

Simply use the keydown event and String.fromCharCode method

$('input').on('keydown', function(event) {
    $('#key-entered').html(String.fromCharCode(event.keyCode));
});

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

<p id='key-entered'>

answered Feb 16 '16 at 22:54

Richard Hamilton

25,478
10
60
87

reading your answer I found it weird it would return uppercased letters. for any others in need of an explanation: apparently it's [how keydown works](https://stackoverflow.com/a/14944501/4770813) – Scaramouche Apr 19 '18 at 20:47

jQuery: Get last change in input field

2 Answers2