Validar input numerico

[Alexis88]

Lo primero que necesitas hacer es bloquear el borrado de caracteres con la tecla Backspace cuando solo haya cuatro elementos en el valor de la caja de texto, y también el borrado con la tecla Del o Supr cuando el cursor del ratón se encuentre antes del cuarto elemento del valor de la caja de texto contando desde la izquierda. Cabe decir que necesitas apoyarte en un evento de teclado anterior al que usas. Podría ser el primero de ellos: keydown.

Código Javascript:

numbersOnly.addEventListener("keydown", function(event){
    if ((event.which == 8 && this.value.length < 5) || (event.which == 46 && this.selectionStart < 4) || (event.which != 37 && event.which != 39 && this.selectionStart < 4)){
        event.preventDefault();
    }
}, false);
 

Lo que hice fue establecer una serie de condiciones para controlar el comportamiento de los eventos del teclado. Primero: verifico que el código de la tecla pulsada (propiedad which) corresponda al de la tecla Backspace (código 8) y que la extensión del valor de la caja de texto (propiedad length) sea menos a 5, es decir, que haya 4 o menos elementos; y, segundo: que el código de la tecla pulsada corresponda al de la tecla Del o Supr (código 46) y que el cursor del ratón se encuentre en una posición (propiedad selectionStart) anterior a la número 4, es decir, en una ubicación en la que pueda borrar a alguno de los cuatro primeros elementos. Por último, existe una tercera condición, similar a la segunda, que verifica que no se haya pulsado las teclas direccionales de la izquierda (código 37) ni derecha (código 39) y que el cursor del ratón se encuentre antes del cuarto elemento del valor de la caja de texto; esto con el objetivo de que no se inserten más valores entre los cuatro primeros. Si alguna de ambas condiciones se diera, cancelo la ejecución del evento con el método .preventDefault().

Una vez que ya tenemos esto, debemos validar que los valores escritos a partir de la siguiente posición del cuarto elemento del valor de la caja de texto en adelante sean solo números. Por cuestiones prácticas, nos conviene validar todo el contenido ya que cabe la posibilidad de que el usuario inserte un valor no permitido entre los cuatro primeros elementos. Para este caso, sugiero que utilices un evento que incluya todas las acciones que se puedan realizar en un campo de texto, como es el evento input.

Código Javascript:

numbersOnly.addEventListener("input", function(){
    this.value = this.value.replace(/[^0-9\+]/g, "");
    this.value = this.value.substr(0, 4) + this.value.substr(4).replace(/\++/g, "");
});
 

A tu expresión regular le añadí el "+" para que también lo valide el método .replace(). Luego de este reemplazo, realizo otro para eliminar los "+" que el usuario haya podido añadir después del cuarto elemento. Finalmente, concateno el bloque de los cuatro primeros elementos (lo sustraigo con el método .substr()) con el resto luego del último reemplazo.

DEMO