El formulario con el que voy a trabajar es muy simple, todo para que se entienda con mas claridad en ejemplo.
[code language=»html»]
<form>
<div class="input-control">
<label for="numero">Cedula</label>
<input type="number" name="cedula" class="no-controls" value=""></div>
</form>
[/code]
Desactivamos los controles por defecto que tiene el input tipo number.
[code language=»css»]
<style>
.no-controls::-webkit-outer-spin-button,
.no-controls::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.no-controls {
-moz-appearance:textfield;
}
</style>
[/code]
El siguiente código Javascript realizado con el Framework JQuery detecta la tecla que se esta presionando en ese momento y verifica que se trate de caracteres numéricos. Para caso practico habilitamos las siguientes opciones en el input:
keycode 8 Retroceso
keycode 37 Flecha Derecha
keycode 39 Flecha Izquierda
keycode 46 Suprimir
Como podemos ver cada tecla corresponde a un código llamado keycode, en keycode.info y www.cambiaresearch.com puedes obtener mas información sobre el código que corresponde a cada tecla.
[code language=»javascript»]
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script>
$(‘document’).ready(function(){
$(".no-controls").keydown(function(event) {
// Desactivamos cualquier combinación con shift
if(event.shiftKey)
event.preventDefault();
/*
No permite ingresar pulsaciones a menos que sean los siguientes
KeyCode Permitidos
keycode 8 Retroceso
keycode 37 Flecha Derecha
keycode 39 Flecha Izquierda
keycode 46 Suprimir
*/
//No permite mas de 11 caracteres Numéricos
if (event.keyCode != 46 && event.keyCode != 8 && event.keyCode != 37 && event.keyCode != 39)
if($(this).val().length >= 11)
event.preventDefault();
// Solo Numeros del 0 a 9
if (event.keyCode < 48 || event.keyCode > 57)
//Solo Teclado Numerico 0 a 9
if (event.keyCode < 96 || event.keyCode > 105)
/*
No permite ingresar pulsaciones a menos que sean los siguietes
KeyCode Permitidos
keycode 8 Retroceso
keycode 37 Flecha Derecha
keycode 39 Flecha Izquierda
keycode 46 Suprimir
*/
if(event.keyCode != 46 && event.keyCode != 8 && event.keyCode != 37 && event.keyCode != 39)
event.preventDefault();
});
});
</script>
[/code]