Home / Questions / 127895
Accepted
omaza1990
Asked: 2020-12-30 16:15:20 +0800 CST 2020-12-30 16:15:20 +0800 CST

onkey event - needs an extra character

  • 772

I have a field in a form, the field is called DNI , where I want to enter 8 numbers and a letter . The letter which we put automatically converts it to uppercase using the toUpperCase() method.

The problem I have is that any onkey event (onkeypress, onkeyup, onkeydown) doesn't work for me directly, it needs one more character to "convert" the previous letter. It does not work directly on the entered letter.

.js file

$(document).on('ready',function(){
    //Convertimos la letra del DNI en mayúscula en tiempo real con el evento onkeyup "toUpperCase()".
    $('#dni').on('keydown', letra_DNI);
});

//Función que convierte la tecla del DNI en mayúscula.
function letra_DNI(e){
    this.value = this.value.toUpperCase();
}

.html file:

<input type="text" name="dni" id="dni" placeholder="DNI" maxlength="9" tabindex="4" class="input-2" onkeypress="return soloLetrasNumeros(event);">

enter image description here

javascript

2 Answers

  1. Best Answer

    A solution can be:

    in the event keypressin which the character has not yet been included in the input, you check if the typed character is valid

    in the event keyupwhere the character has already been included in the input you change any lowercase character to the corresponding uppercase one

    Here is an example.

    In the event keypress, it is verified that the character is a number and that 8 has not yet been entered, or that it is a letter and that 8 digits have already been entered. If not, reject the input.

    In the event it keyupreplaces any lowercase letter entered with the corresponding uppercase one.

    $(document).on('ready',function(){
    //Convertimos la letra del DNI en mayúscula en tiempo real con el evento onkeyup "toUpperCase()".
    $('#dni').on('keypress', soloLetrasNumeros);
    $('#dni').on('keyup', letra_DNI);
});

//Función que convierte la tecla del DNI en mayúscula.
function letra_DNI(e){
    $(this).val($(this).val().replace(/([a-z])/g, x => x.toUpperCase()));
}
function soloLetrasNumeros(e){
  // Si es número y no se han introducido 8 ok
  if (/^\d$/.test(e.key) &&
        $(this).val().length < 8) return true;
  // Si es letra y el valor de la entrada son 8 números
  if (/^[a-zA-Z]$/.test(e.key) && 
        /\d{8}/.test($(this).val())) return true;
  
  return false;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="dni" id="dni" placeholder="DNI" maxlength="9" tabindex="4" class="input-2">

    • 3

  2. If you use the keyboard event keyup you will not have problems.

    document.querySelector('#dni').onkeyup = function(e) {
  this.value = String(this.value || '').toUpperCase();
};
    <input type="text" id="dni" placeholder="DNI">

    • 3