Cómo crear un campo para introducir números de teléfono con banderas de países y prefijos utilizando jQuery

El campo para introducir un número de teléfono suele ser un campo obligatorio en todo formulario de contacto que se precie. Mostrar la bandera del país y el prefijo del propio país hace que el campo sea más sencillo de utilizar. En este tutorial te mostraré cómo implementar un campo para introducir números de teléfono con banderas internacionales y una lista desplegable con prefijos.

Todo esto lo haremos mediante un simple plugin de jQuery llamado International Telephone Input que nos agregará un desplegable en nuestro campo. Lo que hará es listar todos los nombres de los países con sus banderas y prefijos. Este plugin es muy útil si lo que quieres es agregar un campo telefónicos en tus formularios de contacto.

CSS

Incluye el fichero intTelInput.css para personalizar el campo donde los usuarios introducirán sus números de teléfono.

<link rel="stylesheet" href="css/intlTelInput.css">

HTML

El siguiente HTML crea un campo telefónico.

<input type="tel" id="phone" />

Javascript

El plugin utiliza jQuery, por lo que incluye la librería.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ahora, incluye el fichero Javascript del plugin.

<script src="js/intlTelInput.js"></script>

El método intTelInput() inicializa el plugin International Telephone. Lo que hará es convertir nuestro campo en un desplegable con banderas y prefijos.

$("#phone").intlTelInput();

Uso básico

El siguiente ejemplo habilita nuestro campo telefónico. Define el script utils.js en utilsScript para habilitar el formato internacional.

<script>
$("#phone").intlTelInput({
    utilsScript: "js/utils.js"
});
</script>

Uso avanzado

El siguiente ejemplo define un país que aparecerá seleccionado basándose en la IP del usuario.

<script>
$("#phone").intlTelInput({
    initialCountry: "auto",
    geoIpLookup: function(callback) {
        jQuery.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            callback(countryCode);
        });
    },
    utilsScript: "js/utils.js"
});
</script>

Opciones de configuración

El método intTelInput() cuenta con varias opciones de configuración para personalizar la funcionalidad por defecto del plugin. Como por ejemplo:

• allowDropdown (Booleano) (Default: true) Define si queremos habilitar el desplegable o no. Si está deshabilitado, el desplegable no se mostrará en el campo y no se podrá hacer clic en la bandera.
• autoHideDialCode (Booleano) (Default: true) Elimina el prefijo del campo al enviarlo
• autoPlaceHolder (String) (Default: polite) Define un placeholder en el camp
• customPlaceholder (String) (Default: null) Cambia el auto placeholder por un string personalizado
• dropdownContainer (String) (Default:'') Agregar un menú desplegable de país a un elemento específico.
• excludeCountries (Array) (Default: nada) Muestra todos los países excepto los especificados.
• formatOnDisplay (Booleano) (Default: true) Formatea el valor de entrada durante la inicialización.
• geoIpLookup (Función) (Default: nulo) Especifica una función personalizada que busca la ubicación del usuario.
• hiddenInput (String) (Default: '') Agrega uncampo hidden con el nombre dado y, al enviar, se rellena con el resultado de getNumber.
• initialCountry (String) (Default: '') Especifica el código de país para establecer la selección de país inicial. Establécelo en "auto" para obtener la ubicación del usuario por dirección IP usando la opción geoIpLookup.
• nationalMode (Booleano) (Default: true) Permite al usuario ingresar el número sin prefijos.
• placeholderNumberType (String) (Default: MOBILE) Especifica el tipo de número que se usará para los placeholders.
• onlyCountries (Array) (Default: nada) Muestra solo estos países especificados.
• preferredCountries - (Array) (Default: ["us", "gb"]) Define los países que aparecerán en la parte superior de la lista.
• separateDialCode - (Booleano) (Default: false) Muestra el prefijo del país junto a la bandera seleccionada.
• utilsScript - (String) (Default: '') Especifica la ruta al script libphonenumber para habilitar la validación / formateo.