intl tel input
v24.7.0
NOTICIAS: ¡ahora tenemos nuestro propio componente Vue!
NOTICIAS: ¡ahora tenemos nuestro propio componente React! Juega con él en Storybook.
?️ NOTICIAS: ¡ahora ofrecemos traducciones en más de 30 idiomas! Véalos en acción.
International Telephone Input es un complemento de JavaScript para ingresar y validar números de teléfono internacionales. Requiere un campo de entrada normal, agrega un menú desplegable de países con capacidad de búsqueda, detecta automáticamente el país del usuario, muestra un número de marcador de posición relevante, formatea el número a medida que escribe y proporciona métodos de validación integrales. También se incluyen los componentes React y Vue.
Si encuentra útil el complemento, considere apoyar el proyecto.
Utilice la API de Twilio para crear verificación telefónica, SMS 2FA, recordatorios de citas, notificaciones de marketing y mucho más. No podemos esperar a ver lo que construyes.
Ahora proporcionamos componentes React y Vue junto con el complemento JavaScript normal. Este archivo Léame es para el complemento JavaScript. Vea el archivo Léame del componente React o el archivo Léame del componente Vue.
Puede ver una demostración en vivo y ver algunos ejemplos de cómo utilizar las distintas opciones. Alternativamente, pruébelo usted mismo descargando el proyecto y abriendo demo.html en un navegador.
De forma predeterminada, en los dispositivos móviles mostramos una ventana emergente en pantalla completa en lugar del menú desplegable en línea, para aprovechar mejor el espacio limitado de la pantalla. Esto es similar a cómo funciona un elemento <select> nativo. Puede controlar este comportamiento con la opción useFullscreenPopup . La ventana emergente se puede cerrar seleccionando un país de la lista o tocando el área gris a los lados. Ver ejemplo (usando el componente React).
| Cromo | Firefox | Safari | Borde |
|---|---|---|---|
| ✓ | ✓ | v14+ | ✓ |
Nota: ahora hemos dejado de admitir todas las versiones de Internet Explorer porque ya no es compatible con ninguna versión de Windows.
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css " > < script src =" https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.min.js " > </ script >
< script >
const input = document . querySelector ( "#phone" ) ;
window . intlTelInput ( input , {
loadUtilsOnInit : "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" ,
} ) ;
</ script > Instalar con npm: npm install intl-tel-input --save o hilo: yarn add intl-tel-input
Importe el CSS: import 'intl-tel-input/build/css/intlTelInput.css';
Establezca la ruta a flags.webp y Globe.webp en su CSS, anulando las variables CSS
. iti {
--iti-path-flags-1x : url ( 'path/to/flags.webp' );
--iti-path-flags-2x : url ( 'path/to/[email protected]' );
--iti-path-globe-1x : url ( 'path/to/globe.webp' );
--iti-path-globe-2x : url ( 'path/to/[email protected]' );
} import intlTelInput from 'intl-tel-input' ;
const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils" )
} ) ; La mayoría de los paquetes (como Webpack, Vite o Parcel) verán esto y colocarán el script de utilidades en un paquete separado y lo cargarán de forma asincrónica, solo cuando sea necesario. Si esto no funciona con su paquete o desea cargar el módulo de utilidades desde alguna otra ubicación (como una CDN), puede configurar la opción loadUtilsOnInit en la URL desde la cual cargar como una cadena. Por ejemplo:
import intlTelInput from 'intl-tel-input' ;
const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
loadUtilsOnInit : `https://cdn.jsdelivr.net/npm/intl-tel-input@ ${ intlTelInput . version } /build/js/utils.js` ;
} ) ; Descargue la última versión o, mejor aún, instálela con npm
Agrega la hoja de estilo
< link rel =" stylesheet " href =" path/to/intlTelInput.css " >. iti {
--iti-path-flags-1x : url ( 'path/to/flags.webp' );
--iti-path-flags-2x : url ( 'path/to/[email protected]' );
--iti-path-globe-1x : url ( 'path/to/globe.webp' );
--iti-path-globe-2x : url ( 'path/to/[email protected]' );
} < script src =" path/to/intlTelInput.js " > </ script >
< script >
const input = document . querySelector ( "#phone" ) ;
window . intlTelInput ( input , {
loadUtilsOnInit : "path/to/utils.js"
} ) ;
</ script > Le recomendamos encarecidamente que cargue el utils.js incluido, que permite el formateo y la validación, etc. Luego, el complemento está diseñado para manejar siempre números en el formato internacional completo (por ejemplo, "+17024181234") y convertirlos en consecuencia, incluso cuando sea nationalMode o separateDialCode está habilitado. Le recomendamos que obtenga, almacene y configure números exclusivamente en este formato para simplificar; así no tendrá que lidiar con el manejo del código de país por separado, ya que los números internacionales completos incluyen la información del código de país.
Siempre puedes obtener el número internacional completo (incluido el código de país) usando getNumber , luego solo tienes que almacenar esa cadena en tu base de datos (no es necesario que almacene el país por separado) y luego la próxima vez que inicialices el complemento. con ese número en la entrada, configurará automáticamente el país y lo formateará de acuerdo con las opciones que especifique (por ejemplo, cuando utilice nationalMode , mostrará automáticamente el número en formato nacional, eliminando el código de marcación internacional).
Si conoce el país del usuario, puede configurarlo con initialCountry (por ejemplo, "us" para los Estados Unidos), y si no lo sabe, le recomendamos configurar initialCountry en "auto" (junto con la opción geoIpLookup ) para determinar el país del usuario. país según su dirección IP; consulte el ejemplo.
Si conoce el idioma del usuario, puede utilizar las traducciones incluidas para localizar los nombres de los países (etc.); consulte el ejemplo.
Cuando inicializa el complemento, el primer argumento es el elemento de entrada y el segundo es un objeto que contiene las opciones de inicialización que desee, que se detallan a continuación. Nota: cualquier opción que acepte códigos de país debe ser códigos ISO 3166-1 alfa-2.
permitir menú desplegable
Tipo: Boolean Valor predeterminado: true
Si se permite o no el menú desplegable. Si está deshabilitado, no hay una flecha desplegable y no se puede hacer clic en el país seleccionado. Además, si showFlags está habilitado, mostramos la bandera seleccionada a la derecha porque es solo un marcador de estado. Tenga en cuenta que si se habilita separateDialCode , allowDropdown se fuerza a true ya que el menú desplegable es obligatorio cuando el usuario escribe "+" en este caso. Juega con esta opción en Storybook (usando el componente React).
marcador de posición automático
Tipo: String Predeterminado: "polite"
Establezca el marcador de posición de la entrada en un número de ejemplo para el país seleccionado y actualícelo si el país cambia. Puede especificar el tipo de número utilizando la opción placeholderNumberType . De forma predeterminada, está configurado en "polite" , lo que significa que solo establecerá el marcador de posición si la entrada aún no tiene uno. También puedes configurarlo en "aggressive" , que reemplazará cualquier marcador de posición existente, o "off" . Requiere que se cargue el script de utilidades.
clase de contenedor
Tipo: String Predeterminado: ""
Clases adicionales para agregar al contenedor (inyectado) <div> .
paísOrden
Tipo: Array Predeterminado: null
Especifique el orden de la lista de países con una serie de códigos de países iso2. Cualquier país omitido aparecerá después de los especificados, por ejemplo, configurar countryOrder en ["jp", "kr"] dará como resultado la lista: Japón, Corea del Sur, Afganistán, Albania, Argelia, etc.
paísBuscar
Tipo: Boolean Valor predeterminado: true
Agregue una entrada de búsqueda en la parte superior del menú desplegable para que los usuarios puedan filtrar los países mostrados.
marcador de posición personalizado
Tipo: Function Predeterminado: null
Cambie el marcador de posición generado por autoPlaceholder. Debe devolver una cadena.
intlTelInput ( input , {
customPlaceholder : function ( selectedCountryPlaceholder , selectedCountryData ) {
return "e.g. " + selectedCountryPlaceholder ;
} ,
} ) ; contenedor desplegable
Tipo: Node Valor predeterminado: null
Espera un nodo, por ejemplo, document.body . En lugar de colocar el marcado desplegable del país junto a la entrada, agréguelo al nodo especificado y luego se colocará junto a la entrada usando JavaScript (usando position: fixed ). Esto es útil cuando la entrada está dentro de un contenedor con overflow: hidden . Tenga en cuenta que el posicionamiento se rompe al desplazarse, por lo que el menú desplegable se cerrará automáticamente en el evento de desplazamiento window .
excluir países
Tipo: Array Valor predeterminado: []
En el menú desplegable, muestre todos los países excepto los que especifique aquí. Juega con esta opción en Storybook (usando el componente React).
arreglarAnchoDesplegable
Tipo: Boolean Valor predeterminado: true
Fije el ancho del menú desplegable al ancho de entrada (en lugar de ser tan ancho como el nombre del país más largo). Juega con esta opción en Storybook (usando el componente React).
formatoComo escribe
Tipo: Boolean Valor predeterminado: true
Formatee automáticamente el número a medida que el usuario escribe. Esta característica se desactivará si el usuario escribe sus propios caracteres de formato. Requiere que se cargue el script de utilidades.
formato en pantalla
Tipo: Boolean Valor predeterminado: true
Formatee el valor de entrada (según la opción nationalMode ) durante la inicialización y en setNumber . Requiere que se cargue el script de utilidades.
búsquedageoIp
Tipo: Function Predeterminado: null
Al configurar initialCountry en "auto" , debe usar esta opción para especificar una función personalizada que llame a un servicio de búsqueda de IP para obtener la ubicación del usuario y luego invoque la devolución de llamada success con el código de país correspondiente. También tenga en cuenta que al crear una instancia del complemento, se devuelve un objeto Promise bajo la propiedad de instancia promise , por lo que puede hacer algo como iti.promise.then(...) para saber cuándo se han completado solicitudes de inicialización como esta.
A continuación se muestra un ejemplo utilizando el servicio ipapi:
intlTelInput ( input , {
initialCountry : "auto" ,
geoIpLookup : function ( success , failure ) {
fetch ( "https://ipapi.co/json" )
. then ( function ( res ) { return res . json ( ) ; } )
. then ( function ( data ) { success ( data . country_code ) ; } )
. catch ( function ( ) { failure ( ) ; } ) ;
}
} ) ; Tenga en cuenta que se debe llamar a la failure en caso de error, de ahí el uso de catch() en este ejemplo. Consejo: guarde el resultado en una cookie para evitar búsquedas repetidas.
entrada oculta
Tipo: Function Predeterminado: null
Permite la creación de campos de entrada ocultos dentro de un formulario para almacenar el número de teléfono internacional completo y el código del país seleccionado. Acepta una función que recibe como argumento el nombre de la entrada principal del teléfono. Esta función debería devolver un objeto con propiedades phone y (opcionalmente) country para especificar los nombres de las entradas ocultas para el número de teléfono y el código de país, respectivamente. Esto es útil para envíos de formularios que no son Ajax para garantizar que se capturen el número internacional completo y el código de país, especialmente cuando nationalMode está habilitado.
* Nota : esta característica requiere que la entrada esté dentro de un elemento <form> , ya que escucha el evento submit en el elemento de formulario más cercano. También tenga en cuenta que, dado que esto usa getNumber internamente, en primer lugar requiere que se cargue el script utils y, en segundo lugar, espera un número válido y, por lo tanto, solo funcionará correctamente si ha usado isValidNumber para validar el número antes de permitir que se envíe el formulario.
intlTelInput ( input , {
hiddenInput : function ( telInputName ) {
return {
phone : "phone_full" ,
country : "country_code"
} ;
}
} ) ;Esto generará los siguientes elementos (ocultos), que se completarán automáticamente al enviar:
< input type =" hidden " name =" phone_full " >
< input type =" hidden " name =" country_code " > i18n
Tipo: Object Predeterminado: {}
Permitir la localización/personalización de más de 200 nombres de países, así como otros textos de la interfaz de usuario (por ejemplo, el texto del marcador de posición para la entrada de búsqueda de países). La forma más sencilla de hacerlo es simplemente importar uno de los módulos de traducción proporcionados y configurar i18n en ese valor (consulte la opción 1 a continuación). También puede anular una o más claves individuales de esta manera (consulte la opción 1 a continuación). Alternativamente, puede proporcionar sus propias traducciones personalizadas (consulte la opción 2 a continuación). Si proporciona el suyo propio, deberá especificar todos los nombres de los países (que se pueden copiar del proyecto de lista de países, por ejemplo, aquí están los nombres de los países en francés), así como algunas cadenas de interfaz de usuario (enumeradas a continuación). Ver ejemplo.
Si actualmente no admitimos un idioma que necesita, es fácil contribuir con él usted mismo: solo necesita proporcionar un puñado de cadenas de traducción de la interfaz de usuario, ya que automáticamente obtenemos los nombres de los países del proyecto de lista de países.
Opción 1: importar uno de los módulos de traducción proporcionados
import { fr } from "intl-tel-input/i18n" ;
intlTelInput ( input , {
i18n : fr ,
} ) ;
// or to override one or more keys, you could do something like this
intlTelInput ( input , {
i18n : {
... fr ,
searchPlaceholder : "Recherche de pays" ,
} ,
} ) ;Opción 2: define tus propias traducciones personalizadas
intlTelInput ( input , {
i18n : {
// Country names - see the full list in src/js/intl-tel-input/i18n/en/countries.ts
af : "Afghanistan" ,
al : "Albania" ,
dz : "Algeria" ,
as : "American Samoa" ,
ad : "Andorra" ,
...
// Aria label for the selected country element
selectedCountryAriaLabel : "Selected country" ,
// Screen reader text for when no country is selected
noCountrySelected : "No country selected" ,
// Aria label for the country list element
countryListAriaLabel : "List of countries" ,
// Placeholder for the search input in the dropdown
searchPlaceholder : "Search" ,
// Screen reader text for when the search produces no results
zeroSearchResults : "No results found" ,
// Screen reader text for when the search produces 1 result
oneSearchResult : "1 result found" ,
// Screen reader text for when the search produces multiple results
multipleSearchResults : "${count} results found" ,
}
} ) ; inicialPaís
Tipo: String Predeterminado: ""
Establezca la selección inicial de país especificando su código de país, por ejemplo, "us" para Estados Unidos. (Tenga cuidado de no hacer esto a menos que esté seguro del país del usuario, ya que puede generar problemas complicados si se configura incorrectamente y el usuario completa automáticamente su número nacional y envía el formulario sin verificarlo; en ciertos casos, esto puede pasar la validación). y puedes terminar almacenando un número con el código de marcado incorrecto). También puede configurar initialCountry en "auto" , lo que buscará el país del usuario según su dirección IP (requiere la opción geoIpLookup ; consulte el ejemplo). Tenga en cuenta que, independientemente de cómo utilice initialCountry , no actualizará la selección de país si la entrada ya contiene un número con un código de marcación internacional.
loadUtilsOnInit (ver discusión v25)
Tipo: String o () => Promise<module> Valor predeterminado: "" Ejemplo: "/build/js/utils.js"
Esta es una forma de cargar (de forma diferida) los utils.js incluidos (para habilitar el formato/validación, etc.); consulte Carga del script de utilidades para obtener más opciones. Deberá alojar el archivo utils.js y luego configurar la opción loadUtilsOnInit en esa URL o, alternativamente, simplemente señalarlo a una versión alojada en CDN, por ejemplo, "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" . "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" . El script se carga mediante una declaración de importación dinámica, lo que significa que la URL no puede ser relativa, debe ser absoluta.
Alternativamente, puede ser una función que devuelva una promesa para el módulo de utilidades. Cuando se usa un paquete como Webpack, esto se puede usar para decirle al paquete que el script de utilidades debe mantenerse en un archivo separado del resto de su código. Por ejemplo: { loadUtilsOnInit: () => import("intl-tel-input/utils") } .
El script solo se recupera cuando inicializa el complemento y, además, solo cuando la página ha terminado de cargarse (en el evento de carga de la ventana) para evitar el bloqueo (el script es de ~260 KB). Al crear una instancia del complemento, se devuelve un objeto Promise bajo la propiedad de instancia promise , por lo que puede hacer algo como iti.promise.then(callback) para saber cuándo finalizaron solicitudes de inicialización como esta. Consulte Script de utilidades para obtener más información.
modo nacional
Tipo: Boolean Valor predeterminado: true
Formatee los números en el formato nacional, en lugar del formato internacional. Esto se aplica a los números de marcador de posición y cuando se muestran los números existentes de los usuarios. Tenga en cuenta que está bien que los usuarios escriban sus números en formato nacional; siempre que hayan seleccionado el país correcto, puede usar getNumber para extraer un número internacional completo; consulte el ejemplo. Se recomienda dejar esta opción habilitada, para alentar a los usuarios a ingresar sus números en formato nacional, ya que esto suele resultarles más familiar y crea una mejor experiencia de usuario.
soloPaises
Tipo: Array Valor predeterminado: []
En el menú desplegable, muestre solo los países que especifique; consulte el ejemplo.
marcador de posiciónNúmeroTipo
Tipo: String Predeterminado: "MOBILE"
Especifique una de las claves de la enumeración intlTelInput.utils.numberType (por ejemplo, "FIXED_LINE" ) para establecer el tipo de número que se utilizará para el marcador de posición. Juega con esta opción en Storybook (usando el componente React).
mostrar banderas
Tipo: Boolean Valor predeterminado: true
Establezca esto en falso para ocultar las banderas, por ejemplo, por razones políticas. En su lugar, mostrará un ícono de globo terráqueo genérico. Juega con esta opción en Storybook (usando el componente React).
código de marcación separado
Tipo: Boolean Valor predeterminado: false
Muestra el código de marcación internacional del país seleccionado junto a la entrada, para que parezca parte del número escrito. Dado que el usuario no puede editar el código de marcado mostrado, puede intentar escribir uno nuevo; en este caso, para evitar tener dos códigos de marcado uno al lado del otro, abrimos automáticamente el menú desplegable de países y colocamos el nuevo código de marcado en la entrada de búsqueda. en cambio. Entonces, si escriben +54, Argentina se resaltará en el menú desplegable y podrán simplemente presionar Enter para seleccionarlo, actualizando el código de marcación que se muestra (esta función requiere allowDropdown y countrySearch estén habilitados). Juega con esta opción en Storybook (usando el componente React).
modo estricto
Tipo: Boolean Valor predeterminado: false
Mientras el usuario escribe la entrada, ignore los caracteres irrelevantes. El usuario sólo puede ingresar caracteres numéricos y un signo más opcional al principio. Limite la longitud a la longitud máxima válida del número (esto respeta validationNumberType ). Requiere que se cargue el script de utilidades. Ver ejemplo.
utilizar pantalla emergente emergente
Tipo: Boolean Valor predeterminado: true on mobile devices, false otherwise
Controle cuándo aparece la lista de países como una ventana emergente en pantalla completa o como un menú desplegable en línea. De forma predeterminada, aparecerá como una ventana emergente de pantalla completa en dispositivos móviles (según el agente de usuario y el ancho de la pantalla), para hacer un mejor uso del espacio limitado (similar a cómo funciona un <select> nativo) y como un menú desplegable en línea en dispositivos/pantallas más grandes. Juega con esta opción en Storybook (usando el componente React).
utilsScript
Tipo: String o () => Promise<module> Valor predeterminado: "" Ejemplo: "/build/js/utils.js"
Esta opción está en desuso y se le ha cambiado el nombre a loadUtilsOnInit . Consulte los detalles de esa opción y úsela en su lugar.
tipo de número de validación
Tipo: String Predeterminado: "MOBILE"
Especifique una de las claves de la enumeración intlTelInput.utils.numberType (por ejemplo, "FIXED_LINE" ) para establecer el tipo de número que se aplicará durante la validación con isValidNumber , así como la longitud del número que se aplicará con strictMode . Configúrelo en null para no aplicar ningún tipo en particular.
En estos ejemplos, iti se refiere a la instancia del complemento que se devuelve cuando inicializa el complemento, por ejemplo
const iti = intlTelInput ( input ) ; destruir
Elimine el complemento de la entrada y desvincule los detectores de eventos.
iti . destroy ( ) ; obtenerExtensión
Obtenga la extensión del número actual. Requiere que se cargue el script de utilidades.
const extension = iti . getExtension ( ) ; Devuelve una cadena, por ejemplo, si el valor de entrada fuera "(702) 555-5555 ext. 1234" , esto devolvería "1234"
obtenerNúmero
Obtenga el número actual en el formato indicado (el valor predeterminado es el estándar E.164). Los diferentes formatos están disponibles en la enumeración intlTelInput.utils.numberFormat , que puede ver aquí. Requiere que se cargue el script de utilidades. Tenga en cuenta que incluso si nationalMode está habilitado, aún puede devolver un número internacional completo. También tenga en cuenta que este método espera un número válido y, por lo tanto, solo debe usarse después de la validación.
const number = iti . getNumber ( ) ;
// or
const number = iti . getNumber ( intlTelInput . utils . numberFormat . E164 ) ; Devuelve una cadena, por ejemplo, "+17024181234"
obtener tipo de número
Obtenga el tipo (línea fija/móvil/gratuito, etc.) del número actual. Requiere que se cargue el script de utilidades.
const numberType = iti . getNumberType ( ) ; Devuelve un número entero, que puede compararse con las distintas opciones de la enumeración intlTelInput.utils.numberType , por ejemplo.
if ( numberType === intlTelInput . utils . numberType . MOBILE ) {
// is a mobile number
} Tenga en cuenta que en EE. UU. no hay forma de diferenciar entre números de línea fija y móviles, por lo que devolverá FIXED_LINE_OR_MOBILE .
obtener datos del país seleccionado
Obtenga los datos del país seleccionado actualmente.
const countryData = iti . getSelectedCountryData ( ) ;Devuelve algo como esto:
{
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} obtener error de validación
Obtenga más información sobre un error de validación. Requiere que se cargue el script de utilidades.
const error = iti . getValidationError ( ) ; Devuelve un número entero, que puede compararse con las distintas opciones de la enumeración intlTelInput.utils.validationError , por ejemplo.
if ( error === intlTelInput . utils . validationError . TOO_SHORT ) {
// the number is too short
} esNúmeroValido
Compruebe si el número actual es válido según su longitud; consulte el ejemplo, que debería ser suficiente para la mayoría de los casos de uso. Consulte isValidNumberPrecise para una validación más precisa, pero la ventaja de isValidNumber es que está mucho más preparado para el futuro, ya que si bien los países de todo el mundo actualizan periódicamente sus reglas numéricas, muy rara vez cambian la longitud de sus números. Si este método devuelve false , puede usar getValidationError para obtener más información. Respeta la opción validationNumberType (que está configurada en "MÓVIL" de forma predeterminada). Requiere que se cargue el script de utilidades.
const isValid = iti . isValidNumber ( ) ; Devuelve: true / false
esValidNumberPrecise
Compruebe si el número actual es válido utilizando reglas de coincidencia precisas para cada país/código de área, etc.; consulte el ejemplo. Tenga en cuenta que estas reglas cambian cada mes para varios países del mundo, por lo que debe tener cuidado de mantener el complemento actualizado, de lo contrario comenzará a rechazar números válidos. Para obtener una forma de validación más sencilla y preparada para el futuro, consulte isValidNumber más arriba. Si la validación falla, puede usar getValidationError para obtener más información. Requiere que se cargue el script de utilidades.
const isValid = iti . isValidNumberPrecise ( ) ; Devuelve: true / false
establecerPaís
Cambiar el país seleccionado. Debería ser raro, o nunca, que necesites hacer esto, ya que el país seleccionado se actualiza automáticamente cuando llamas setNumber y pasas un número que incluye un código de marcación internacional, que es el uso recomendado. Tenga en cuenta que puede omitir el argumento del código de país para establecer el país en el estado vacío (globo) predeterminado.
iti . setCountry ( "gb" ) ; establecerNúmero
Inserte un número y actualice el país seleccionado en consecuencia. Tenga en cuenta que si formatOnDisplay está habilitado, se intentará formatear el número en formato nacional o internacional según la opción nationalMode .
iti . setNumber ( "+447733123456" ) ; establecer tipo de número de marcador de posición
Cambie la opción placeholderNumberType.
iti . setPlaceholderNumberType ( "FIXED_LINE" ) ; setDisabled
Actualiza el atributo deshabilitado tanto de la entrada del teléfono como del botón del país seleccionado. Acepta un valor booleano. Nota: recomendamos usar esto en lugar de actualizar directamente el atributo deshabilitado de la entrada.
iti . setDisabled ( true ) ; obtener datos del país
Recupere los datos del país del complemento, ya sea para reutilizarlos en otro lugar, por ejemplo, para generar su propio menú desplegable de países; consulte el ejemplo o, alternativamente, puede usarlos para modificar los datos del país. Tenga en cuenta que cualquier modificación debe realizarse antes de inicializar el complemento.
const countryData = intlTelInput . getCountryData ( ) ;Devuelve una serie de objetos de país:
[ {
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} , ... ] obtener instancia
Después de inicializar el complemento, siempre puedes acceder a la instancia nuevamente usando este método, simplemente pasando el elemento de entrada relevante.
const input = document . querySelector ( '#phone' ) ;
const iti = intlTelInput . getInstance ( input ) ;
iti . isValidNumber ( ) ; // etc loadUtils (ver discusión v25)
Una alternativa a la opción loadUtilsOnInit , este método le permite cargar manualmente el script utils.js a pedido, para habilitar el formato/validación, etc. Consulte Carga del script de utilidades para obtener más información. Este método solo debe llamarse una vez por página. Se devuelve un objeto Promise para que pueda usar loadUtils().then(callback) para saber cuándo finaliza.
// Load from a URL:
intlTelInput . loadUtils ( "/build/js/utils.js" ) ;
// Or manage load via some other method with a function:
intlTelInput . loadUtils ( async ( ) => {
// Your own loading logic here. Return a JavaScript "module" object with
// the utils as the default export.
return { default : { /* a copy of the utils module */ } }
} ) ; Puede escuchar los siguientes eventos activados en el elemento de entrada.
cambio de país
Esto se activa cuando se actualiza el país seleccionado, por ejemplo, si el usuario selecciona un país del menú desplegable, o escribe un código de marcado diferente en la entrada, o llama setCountry , etc.
input . addEventListener ( "countrychange" , function ( ) {
// do something with iti.getSelectedCountryData()
} ) ;Vea un ejemplo aquí: Sincronización de países
abierto: país desplegable
Esto se activa cuando el usuario abre el menú desplegable.
cerrar: menú desplegable de países
Esto se activa cuando el usuario cierra el menú desplegable.
Hay muchas variables CSS disponibles para la temática. Consulte intlTelInput.scss para obtener la lista completa.
En cuanto al estado vacío (ícono de globo), la versión predeterminada es gris oscuro y también proporcionamos una versión "clara", que debería funcionar mejor con un tema oscuro. Alternativamente, es fácil volver a generar el ícono del globo terráqueo en cualquier color que necesites para tu tema. Le recomendamos descargarlo en la resolución más alta posible y luego reducir la imagen a los tamaños requeridos (20 px de ancho para la versión predeterminada y 40 px de ancho para la versión @2x).
Ejemplo de modo oscuro (con captura de pantalla a continuación):
@media ( prefers-color-scheme : dark) {
. iti {
--iti-border-color : # 5b5b5b ;
--iti-dialcode-color : # 999999 ;
--iti-dropdown-bg : # 0d1117 ;
--iti-arrow-color : # aaaaaa ;
--iti-hover-color : # 30363d ;
--iti-path-globe-1x : url ( "path/to/globe_light.webp" );
--iti-path-globe-2x : url ( "path/to/[email protected]" );
}
}
