Soporte del tipo number en los elementos input

Input type number

Imagen no disponible

Input tipo text y number en Chrome 30. Estos acompañan botones para subir y bajar valores.

Los elementos <input> ofrecen nuevos tipos en HTML5. Uno de ellos es el tipo number para controlar la entrada de números. Sus atributos min, max y step nos permite especificar un valor mínimo, máximo y el paso de valor al subir o bajar mediante los botones anexos que incorpora el navegador. En la imagen adjunta, de la página cómo se hace un slider con JavaScript, se observan tres elementos, el primero tiene type="text" controlándose la entrada de números mediante una función limitaValor(this, 'entero', 10, 20) que se ejecuta en el evento onchange. Los dos siguientes tienen type="number", el primero para números enteros con atributos min=10, max=20 y step=1. El segundo es para números reales con atributos min=10 y max=20 también pero con un paso de valor step=0.5. Ahora ya no necesitamos funciones auxiliares como limitaValor() para controlar el valor numérico introducido, el tipo number se encarga de que el valor siempre esté en el rango declarado.

La primera imagen mostrada en la serie es del navegador Chrome 30, observándose como implementa unos botones para subir y bajar los valores numéricos de los dos input type number. También lo hace Opera 12 pero no lo implementa Firefox 24. La situación en navegadores móviles es diferente. De los que he podido observar ninguno implementa los botones para subir o bajar de valor. Quizás sea debido al reducido espacio que tendrían estos botones en un móvil tal que lo harían poco operativo. En los móviles las entradas de texto y números se controlan con un teclado que aparece cuando entramos en algún control de formulario como <input type="text">, <input type="number"> o <textarea> por ejemplo. Si entramos en el primer <input type="text"> de los señalados antes veremos esto en el navegador que trae el Android 2.3.3:

Teclado alfanumérico en Android 2.3.3.

Al ser un tipo de campo de texto el navegador informa al sistema operativo Android que abra un teclado alfanumérico. Estos teclados son una característica del sistema operativo y no del navegador. Si pasamos a un campo numérico se abrirá un teclado diferente para ese propósito:

Teclado numérico en Android 2.3.3.

Tiene los dígitos numéricos, el guión para posibles números negativos y otros caracteres necesarios para otros tipos posibles (tipo teléfono por ejemplo). Hay un botón con la etiqueta ?#+ que nos permite acceder a más caracteres:

Teclado numérico, parte de símbolos, en Android 2.3.3.

Encontramos ahí un punto para posibles valores decimales y otra vez el guión para números negativos. Con el botón 123 volveríamos al teclado de dígitos numéricos. Esto es en Android 2.3.3, pero en Android 4.2.2 al entrar en un <input type="number"> con valores reales nos presenta el siguiente teclado:

Teclado numérico en Android 4.2.2.

¿Cómo podemos introducir un valor real con el punto (o la coma) decimal ahí? ¿O un número negativo?. Me ha resultado imposible. Sólo podemos introducir números enteros aunque ese <input type="number"> tenga step="0.5" y por tanto debería tener una tecla con el punto decimal.

Teclado auxiliar para input type number

Para arreglar el problema señalado antes del teclado de Android 4.2.2 y de paso ofrecer unos botones para subir y bajar valores en cualquier navegador he desarrollado este teclado auxiliar para el input type number. Y esto independientemente del soporte del type number que tenga el navegador. A continuación se muestran cuatro <input type="number"> con varios rangos y pasos de valor:

Estas son algunas vistas tomadas en varios navegadores.

Teclado auxiliar

Imagen no disponible

Vista en Chrome 30 sobre Android 4.2.2. del teclado auxiliar para números enteros positivos, mostrando el botón de cerrar y las dos flechas para subir y bajar valores.

Las primeras cuatro capturas de pantalla de esta serie se realizaron en Chrome 30 sobre Android 4.2.2 pasando el foco a cada uno de los cuatro elementos <input type="number"> anteriores. Se observa como el teclado auxiliar complementará lo que le falta al del dispositivo. Además las flechas para subir y bajar valores tendrán la misma utilidad que la de los navegadores que las incorporan. La tecla para introducir un punto en números decimales aparecerá automáticamente según el elemento especifique en sus atributos min, max, step o value algún número real. Para presentar la tecla de negativos sólo hace falta mirar si el valor en min es negativo.

En navegadores de ordenadores de sobremesa funcionará sin mayores problemas, incluso en aquellos que no soporten el tipo number, como Internet Explorer 8.

Puede implementarlo obvservando el ejemplo integrado de uso expuesto en el enlace al inicio de este tema, donde se desarrolla el mismo ejemplo anterior integrando todos los recursos de CSS y JavaScript:

• teclado-auxiliar-integrado.js
• teclado-auxiliar-integrado.css

Esos archivos se vinculan en una página como esta:

<!DOCTYPE html>
        <html lang="es">
        <head>
            ...
            <link rel="stylesheet" href="teclado-auxiliar-integrado.css" />
            <script src="teclado-auxiliar-integrado.js"></script>
            ...
        </head>
        <body>
            ...
            <input type="number"
            min="10" max="20" step="1" value="15" />
            ...
           <script>
               var teC = teC || {};
               window.onload = function() {
                    //carga el teclado
                    teC.cargarTecladoAuxiliar(document.body);
               };
           </script>
        </body>
        </html>

La variable teC es un objeto que contiene todas las funciones que manejan el teclado auxiliar. En el window.onload de la página cargaremos el teclado para los elementos <input type="number"> ubicados en un contenedor cualquiera. En el código anterior hemos pasado document.body y por lo tanto se aplicará a todos los de la página. El argumento también permite otras opciones, pudiendo ser:

• Una referencia a un contenedor de la página, aplicándose a todos los input que contenga (como document.body).
• Un string, en cuyo caso se revisará si existe un contenedor con ese ID y se le aplicará sólo a los input que contenga.
• Si no hay ningún ID anterior, se revisarán todos los contenedores con ese string por nombre de clase (class), aplicándose a todos los input que contenga.