keypress event not working with the last inserted character

Question

I made this code:

$(".SermeCoopConvertirMayuscula").keypress(function (e) {
    $(this).val($(this).val().toUpperCase());
    regexp = /^[A-Z0-9 ]*$/;
    return regexp.test($(this).val());
});

It is working fine. But when i type something it doesn't update my last inserted character. How can i make that the last character is added?

I need use the keypress event, i cant use the keyup event.

Can you not use the https://api.jquery.com/change/ function instead? — George, Jun 05 '15 at 13:50
Have a look at my latest solution if you can't use keyup event — Parag Bhayani, Jun 05 '15 at 14:08

Parag Bhayani · Accepted Answer · 2018-11-19T06:03:02.640

True, because when function is called the field is not updated with the value

The event is called in this steps

Keydown
Keypress
updateview
Keypress
updateview
keyup

So if you can change this event to keyup then you will get the latest value

Or, if you still want to use keypress event that you can do one thing you can use the following code

$(".SermeCoopConvertirMayuscula").keypress(function (eventObject) {
    var val = $(this).val() + eventObject.key;
    val =val.toUpperCase()
    var regexp1 = /^[A-Z0-9 ]*$/;
    var regexp2 = /^[A-Za-z0-9 ]$/;
    if(regexp1.test(val) && regexp2.test(eventObject.key)) {
      $(this).val(val);
    }

    return false;
});

score 6 · Answer 2 · answered Jun 05 '15 at 13:53

Use keyup() instead. when keypress() is fired, the most recent character is still not registered in the input, so $(this).val() will not include it for the most recent event

$("input").keyup(function (e) {
    $(this).val($(this).val().toUpperCase());
    regexp = /^[A-Z0-9 ]*$/;
    return regexp.test($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input/>

score 3 · Answer 3 · edited May 23 '17 at 12:14

You could also try input which also takes care of various other input scenarios. Take a look at this for more details.

$(".SermeCoopConvertirMayuscula").on("input", function (e) {
    $(this).val($(this).val().toUpperCase());
    regexp = /^[A-Z0-9 ]*$/;
    return regexp.test($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="SermeCoopConvertirMayuscula" />

keypress event not working with the last inserted character

3 Answers3