Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

keypress event not working with the last inserted character

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.

like image 690
kowalcyck Avatar asked Jun 05 '15 13:06

kowalcyck


People also ask

Should I use Keyup or Keydown?

Both are used as per the need of your program and as per the convenience of the user. keyup Fires when the user releases a key, after the default action of that key has been performed. keydown Fires when the user depresses a key.

Are keypress events deprecated?

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.

What is the difference between Keyup and Keydown?

The keydown event occurs when the key is pressed, followed immediately by the keypress event. Then the keyup event is generated when the key is released.

What is the difference between jquery's change () and keypress () events?

The change event occurs if the value has been changed when the element loses focus. The keypress event occurs every time you press down and release a (non control) key.


3 Answers

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

The event is called in this steps

  1. Keydown
  2. Keypress
  3. updateview
  4. Keypress
  5. updateview
  6. 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;
});
like image 163
Parag Bhayani Avatar answered Nov 15 '22 01:11

Parag Bhayani


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/>
like image 40
AmmarCSE Avatar answered Nov 15 '22 00:11

AmmarCSE


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" />
like image 41
lshettyl Avatar answered Nov 14 '22 23:11

lshettyl