Cómo crear un campo para introducir números de teléfono

Los números de teléfono, además del nombre y el email, es la información que más se pide en los formularios online. Los campos para introducir números de teléfono generalmente están diseñados de una manera que requiere que el usuarios escriba los números con su teclado. Este método da pie con frecuencia a la introducción de de datos incorrectos.

Para reducir dichos errores y mejorar la experiencia del usuario en tu sitio, puedes crear un GUI que permita a los usuarios introducir rápidamente su número de teléfono, de una manera similar a los date picker.

En este tutorial, veremos cómo insertar un sencillo campo para introducir números de teléfono. Para ello, vamos a utilizar HTML5, CSS3 y Javascript.

Crea el campo telefónico

En primer lugar, creamos un campo input con un icono a su derecha que abrirá con un teclado al hacer clic. El icono de marcación consistirá en 9 cuadrados negros, colocados de tres en tres, emulando el teclado de un teléfono normal.

Utilizaré el tipo tel de input por la semántica de HTML5, pero también se puedes utilizar un input text normal si así lo deseas.

<div id="dialWrapper">
    <input id="phoneNo" type="tel">
    <img id="dialIcon" src="dialIcon.png">
</div>

Crea la pantalla de teclado

La pantalla de teclado es una cuadrícula de números del 0 al 9, mas unos caracteres especiales. Se puede implementar ya sea con un table de HTML o con JavaScript.

Te mostraré cómo crear la tabla para la pantalla de teclado en JavaScript. Puedes, por supuesto, agregar la tabla directamente en el código fuente HTML si lo prefieres de esa manera.

En primer lugar, crea un nuevo elemento 'table' en el DOM utilizando el método createElement(). No olvides ponerle como ID 'dial'.

/* Create dial screen */
var dial = document.createElement('table');
    dial.id = 'dial';

Añade un bucle for para insertar las cuatro filas de la tabla de marcado. Luego, para cada fila, ejecutar otro bucle con el fin de añadir tres celdas por fila. Ponle a cada celda, como nombre de clase 'dialDigit'.

for (var rowNum = 0; rowNum < 4; rowNum++) {
    var row = dial.insertRow(rowNum);
    for (var colNum = 0; colNum < 3; colNum++) {
        var cell = row.insertCell(colNum);
        cell.className = 'dialDigit';
        cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
    }
}

Los dos bucles de arriba calculan los dígitos que van las celdas del teclado (los valores de la propiedad cell.textContent) de la siguiente manera:

(colNum + 1) + (rowNum * 3)
/* first row */
(0 + 1) + (0 * 3) = 1
(1 + 1) + (0 * 3) = 2
(2 + 1) + (0 * 3) = 3
/* second row */
(0 + 1) + (1 * 3) = 4
(1 + 1) + (1 * 3) = 5
(2 + 1) + (1 * 3) = 6
/* etc. */

La última fila es diferente, ya que se compone de dos caracteres especiales, - y + que se utilizan en los teclados para identificar códigos regionales, y el dígito 0.

Para crear la última fila de la pantalla de teclado, inserta la siguiente sentencia if en el interior del bucle for.

for (var rowNum = 0; rowNum < 4; rowNum++) {
  var row = dial.insertRow(rowNum);
  for (var colNum = 0; colNum < 3; colNum++) {
    /* if last row */
    if (rowNum === 3) {
      cell = row.insertCell(colNum);
      cell.textContent = '-';
      cell.className = 'dialDigit';
      cell = row.insertCell(colNum);
      cell.textContent = '0';
      cell.className = 'dialDigit';
      cell = row.insertCell(colNum);
      cell.textContent = '+';
      cell.className = 'dialDigit';
      break;
    }
    cell = row.insertCell(colNum);
    cell.className = 'dialDigit';
    cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
  }
}

Ya hemos terminado la pantalla de teclado. Agrégala al contenedor #dialWrapper que hemos implementado en el paso 1 haciendo uso de dos métodos DOM:

  • El método querySelector() para seleccionar el contenedor
  • El método appendChild() para anexar la pantalla de teclado al contenedor
document.querySelector('#dialWrapper').appendChild(dial);

Da estilo a la pantalla de teclado

Para hacerla más atractiva, lo suyo es darle estilo a la pantalla de teclado.

No necesariamente lo tienes que hacer con el estilo que pongo aquí, pero no olvides añadir la propiedad user-select:none; al contenedor dial para que, mientras el usuario clica en los dígitos, eñ texto no se seleccione con el cursor.

#dial {
      width: 200px;
      height: 200px;
      border-collapse: collapse;
      text-align: center;
      position: relative;
      -ms-user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      color: #000;
      box-shadow: 0 0 6px #999;
}
.dialDigit {
      border: 1px solid #fff;
      cursor: pointer;
      background-color: rgba(255,228,142,.7);
}

Muestra la pantalla de teclado al hacer clic

Antes que nada, añade la regla visibility:hidden; en el CSS de arriba para ocultar la pantalla de teclado por defecto. Solamente se mostrará cuando el usuario haga clic sobre el icono del teclado.

A continuación, agrega un detector del evento clic al icono del teclado con JavaScript para activar y desactivar la visibilidad de la pantalla de teclado.

Para ello, es necesario utilizar los métodos que hemos mencionado antes, querySelector() y addEventListener(). Con este último, detectaremos el click y llamaremos a la función toggleDial().

La función toggleDial() cambia la visibilidad de la pantalla de teclado de oculta a visible, y viceversa.

document.querySelector('#dialIcon').addEventListener('click', toggleDial);
 
function toggleDial() {
    dial.style.visibility =
    dial.style.visibility === 'hidden' || dial.style.visibility === ''
    ? 'visible' : 'hidden';
}

Añade la funcionalidad

Agrega una función que introduzca los dígitos en el campo teléfono al hacer clic en las celdas de la pantalla de teclado.

La función DialNumber() añade los dígitos uno a uno a la propiedad textContent del campo con el identificador #phoneNo

phoneNo = document.querySelector('#phoneNo');
function dialNumber() {
    phoneNo.value += this.textContent;
}
dialDigits = document.querySelectorAll('.dialDigit');
for (var i = 0; i < dialDigits.length; i++) {
    dialDigits[i].addEventListener('click', dialNumber);
}

Ahora ya solo queda darle estilo a las celdas, cuando sean presionadas y cuando estén activas.

.dialDigit:hover{
      background-color: rgb(255,228,142);
}
.dialDigit:active{
      background-color: #FF6478;
}

Fuente: hongkiat.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP