Números de sólo entrada en JavaScript

1. Use el atributo de campo number y establezca la condición para keyCode en JavaScript
2. Use el atributo de campo input y establezca la condición para keyCode en JavaScript

Ningún método o propiedad específica en JavaScript permitirá directamente que el campo de input de HTML tome solo valores de tipo number. Más bien, hay un atributo number para el campo de input que solo toma valores de tipo numérico en el cuadro de entrada.

Otra forma de realizar la tarea de filtrar solo los números es establecer el tipo de campos de input en input, y esto significa habilitar casi todo tipo de entradas posibles. Esto tiene en cuenta los valores alfanuméricos.

Las condiciones específicas implícitas en el código JavaScript se filtrarán para aceptar solo los números.

Trabajaremos con el evento keypress y tomaremos su keyCode en los siguientes casos. Y luego, en base a nuestro motivo, estableceremos algunas condiciones para validar solo los datos de tipo numérico.

Un ejemplo tendrá el atributo number y el otro tendrá el atributo input para el campo de entrada.

Use el atributo de campo number y establezca la condición para keyCode en JavaScript

Nuestro ejemplo tendrá un campo de entrada correspondiente a una base de código JavaScript. Inicialmente, tomaremos el keyCode a través de event.keyCode o event.which.

Este keyCode y which funciona de manera similar varía de un navegador a otro. Entonces, en última instancia, en función de los códigos, filtraremos los valores.

Revisemos la valla de código.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input name="someid" type="number" onkeypress="isNumberKey(event)"/>
<div>
</div>
<script>
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
  $(document).ready(function(){
  $("input").keydown(function(event){
    $("div").html("Key: " + event.which);
  });
});
</script>

Producción:

Como puede verse, hemos pulsado a=65, b=66, y c=67, pero estos valores no se aceptan. Y posteriormente, se colocaron los valores 4 y 2 en el cuadro de entrada.

Use el atributo de campo input y establezca la condición para keyCode en JavaScript

Estableceremos de manera similar el código JavaScript para nuestro campo de entrada en este segmento, pero este atributo se establecerá como input. Por defecto, el atributo de tipo Number toma números y excluye otros caracteres, pero en el caso del tipo input, tendremos el privilegio de escribir otros caracteres como retroceso, letras, etc.

Aquí, nuestro código JavaScript se validará para contar solo los números.

Fragmento de código:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="input" id="edit1" size="11" maxlength="10" />
<div>
</div>
<script>
$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});
function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
    	return true;
    }
};
   $(document).ready(function(){
  $("input").keydown(function(event){
    $("div").html("Key: " + event.which);
  });
});
</script>

Producción: