intl tel input
v24.7.0
NOTÍCIAS: agora temos nosso próprio componente Vue!
NOTÍCIAS: agora temos nosso próprio componente React! Brinque com ele no Storybook.
?️ NOTÍCIAS: agora oferecemos traduções em mais de 30 idiomas! Veja-os em ação.
Entrada de telefone internacional é um plugin JavaScript para inserir e validar números de telefone internacionais. Ele usa um campo de entrada regular, adiciona um menu suspenso de país pesquisável, detecta automaticamente o país do usuário, exibe um número de espaço reservado relevante, formata o número conforme você digita e fornece métodos de validação abrangentes. Os componentes React e Vue também estão incluídos.
Se você achar o plugin útil, considere apoiar o projeto.
Use a API da Twilio para criar verificação de telefone, SMS 2FA, lembretes de compromissos, notificações de marketing e muito mais. Mal podemos esperar para ver o que você construirá.
Agora fornecemos componentes React e Vue junto com o plugin JavaScript normal. Este leia-me é para o plugin JavaScript. Veja o leia-me do componente React ou o leia-me do componente Vue.
Você pode assistir a uma demonstração ao vivo e ver alguns exemplos de como usar as várias opções. Alternativamente, experimente você mesmo baixando o projeto e abrindo demo.html em um navegador.
Por padrão, em dispositivos móveis, mostramos um pop-up em tela cheia em vez do menu suspenso embutido, para aproveitar melhor o espaço limitado da tela. Isso é semelhante ao funcionamento de um elemento <select> nativo. Você pode controlar esse comportamento com a opção useFullscreenPopup . O pop-up pode ser fechado selecionando um país na lista ou tocando na área cinza nas laterais. Veja exemplo (usando o componente React).
| Cromo | Raposa de fogo | Safári | Borda |
|---|---|---|---|
| ✓ | ✓ | v14+ | ✓ |
Observação: agora abandonamos o suporte para todas as versões do Internet Explorer porque ele não é mais compatível com nenhuma versão do 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 > Instale com npm: npm install intl-tel-input --save ou yarn: yarn add intl-tel-input
Importe o CSS: import 'intl-tel-input/build/css/intlTelInput.css';
Defina o caminho para flags.webp e Globe.webp em seu CSS, substituindo as variáveis 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" )
} ) ; A maioria dos empacotadores (como Webpack, Vite ou Parcel) verá isso e colocará o script de utilitários em um pacote separado e o carregará de forma assíncrona, somente quando necessário. Se isso não funcionar com o seu bundler ou você quiser carregar o módulo utils de algum outro local (como um CDN), você pode definir a opção loadUtilsOnInit como o URL para carregar como uma string. Por exemplo:
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` ;
} ) ; Baixe a versão mais recente ou, melhor ainda, instale-a com npm
Adicione a folha 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 > É altamente recomendável que você carregue o utils.js incluído, que permite formatação e validação, etc. Em seguida, o plugin é construído para sempre lidar com números no formato internacional completo (por exemplo, "+17024181234") e convertê-los adequadamente - mesmo quando nationalMode ou separateDialCode está habilitado. Recomendamos que você obtenha, armazene e defina números exclusivamente neste formato para simplificar - então você não terá que lidar com o tratamento do código do país separadamente, pois os números internacionais completos incluem as informações do código do país.
Você sempre pode obter o número internacional completo (incluindo o código do país) usando getNumber , então você só precisa armazenar essa string em seu banco de dados (você não precisa armazenar o país separadamente) e na próxima vez que inicializar o plugin com esse número na entrada, ele irá definir automaticamente o país e formatá-lo de acordo com as opções que você especificar (por exemplo, ao usar nationalMode ele exibirá automaticamente o número no formato nacional, removendo o código de discagem internacional).
Se você conhece o país do usuário, pode defini-lo com initialCountry (por exemplo, "us" para os Estados Unidos) e, caso não saiba, recomendamos definir initialCountry como "auto" (junto com a opção geoIpLookup ) para determinar o país do usuário. país com base no seu endereço IP - veja o exemplo.
Se você conhece o idioma do usuário, pode usar as traduções incluídas para localizar os nomes dos países (etc) - veja o exemplo.
Quando você inicializa o plugin, o primeiro argumento é o elemento de entrada e o segundo é um objeto contendo quaisquer opções de inicialização desejadas, que são detalhadas abaixo. Observação: quaisquer opções que aceitem códigos de país devem ser códigos ISO 3166-1 alfa-2.
permitirDropdown
Tipo: Boolean Padrão: true
Se deve ou não permitir o menu suspenso. Se desativado, não haverá seta suspensa e o país selecionado não poderá ser clicado. Além disso, se showFlags estiver habilitado, exibiremos o sinalizador selecionado à direita porque é apenas um marcador de estado. Observe que se separateDialCode estiver habilitado, allowDropdown será forçado a true , pois o menu suspenso é necessário quando o usuário digita "+" neste caso. Brinque com esta opção no Storybook (usando o componente React).
autoPlaceholder
Tipo: String Padrão: "polite"
Defina o espaço reservado da entrada para um número de exemplo para o país selecionado e atualize-o se o país mudar. Você pode especificar o tipo de número usando a opção placeholderNumberType . Por padrão, está definido como "polite" , o que significa que só definirá o espaço reservado se a entrada ainda não tiver um. Você também pode configurá-lo como "aggressive" , que substituirá qualquer espaço reservado existente, ou "off" . Requer que o script utils seja carregado.
classe de contêiner
Tipo: String Padrão: ""
Classes adicionais para adicionar ao wrapper (injetado) <div> .
paísOrdem
Tipo: Array Padrão: null
Especifique a ordem da lista de países com uma matriz de códigos de países iso2. Quaisquer países omitidos aparecerão após aqueles especificados, por exemplo, definir countryOrder como ["jp", "kr"] resultará na lista: Japão, Coreia do Sul, Afeganistão, Albânia, Argélia etc...
paísPesquisa
Tipo: Boolean Padrão: true
Adicione uma entrada de pesquisa na parte superior do menu suspenso para que os usuários possam filtrar os países exibidos.
espaço reservado personalizado
Tipo: Function Padrão: null
Altere o espaço reservado gerado por autoPlaceholder. Deve retornar uma string.
intlTelInput ( input , {
customPlaceholder : function ( selectedCountryPlaceholder , selectedCountryData ) {
return "e.g. " + selectedCountryPlaceholder ;
} ,
} ) ; dropdownContainer
Tipo: Node Padrão: null
Espera um nó, por exemplo document.body . Em vez de colocar a marcação suspensa do país ao lado da entrada, anexe-a ao nó especificado e ela será posicionada próximo à entrada usando JavaScript (usando position: fixed ). Isso é útil quando a entrada está dentro de um contêiner com overflow: hidden . Observe que o posicionamento é quebrado pela rolagem, então o menu suspenso será fechado automaticamente no evento de rolagem window .
excluirPaíses
Tipo: Array Padrão: []
No menu suspenso, exiba todos os países, exceto aqueles especificados aqui. Brinque com esta opção no Storybook (usando o componente React).
corrigirDropdownWidth
Tipo: Boolean Padrão: true
Fixe a largura do menu suspenso à largura de entrada (em vez de ser tão larga quanto o nome de país mais longo). Brinque com esta opção no Storybook (usando o componente React).
formatoAsYouType
Tipo: Boolean Padrão: true
Formate automaticamente o número conforme o usuário digita. Este recurso será desabilitado se o usuário digitar seus próprios caracteres de formatação. Requer que o script utils seja carregado.
formatoOnDisplay
Tipo: Boolean Padrão: true
Formate o valor de entrada (de acordo com a opção nationalMode ) durante a inicialização e em setNumber . Requer que o script utils seja carregado.
geoIpLookup
Tipo: Function Padrão: null
Ao definir initialCountry como "auto" , você deve usar esta opção para especificar uma função personalizada que chama um serviço de pesquisa de IP para obter a localização do usuário e, em seguida, invoca o retorno de chamada success com o código do país relevante. Observe também que ao instanciar o plugin, um objeto Promise é retornado sob a propriedade da instância promise , então você pode fazer algo como iti.promise.then(...) para saber quando solicitações de inicialização como essa foram concluídas.
Aqui está um exemplo usando o serviço 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 ( ) ; } ) ;
}
} ) ; Observe que o retorno de chamada failure deve ser chamado no caso de um erro, daí o uso de catch() neste exemplo. Dica: armazene o resultado em um cookie para evitar pesquisas repetidas!
entrada oculta
Tipo: Function Padrão: null
Permite a criação de campos de entrada ocultos em um formulário para armazenar o número de telefone internacional completo e o código do país selecionado. Aceita uma função que recebe como argumento o nome da entrada telefônica principal. Esta função deve retornar um objeto com propriedades phone e (opcionalmente) country para especificar os nomes das entradas ocultas para o número de telefone e código do país, respectivamente. Isto é útil para envios de formulários não Ajax para garantir que o número internacional completo e o código do país sejam capturados, especialmente quando nationalMode está habilitado.
* Nota : Este recurso requer que a entrada esteja dentro de um elemento <form> , pois escuta o evento submit no elemento de formulário mais próximo. Observe também que, como usa getNumber internamente, primeiro requer que o script utils seja carregado e, em segundo lugar, espera um número válido e, portanto, só funcionará corretamente se você tiver usado isValidNumber para validar o número antes de permitir o envio do formulário.
intlTelInput ( input , {
hiddenInput : function ( telInputName ) {
return {
phone : "phone_full" ,
country : "country_code"
} ;
}
} ) ;Isso irá gerar os seguintes elementos (ocultos), que serão preenchidos automaticamente no envio:
< input type =" hidden " name =" phone_full " >
< input type =" hidden " name =" country_code " > i18n
Tipo: Object Padrão: {}
Permitir localização/personalização de mais de 200 nomes de países, bem como outro texto da interface do usuário (por exemplo, o texto do espaço reservado para a entrada de pesquisa do país). A maneira mais fácil de fazer isso é simplesmente importar um dos módulos de tradução fornecidos e definir i18n com esse valor (veja a opção 1 abaixo). Você também pode substituir uma ou mais chaves individuais desta forma (veja a opção 1 abaixo). Alternativamente, você pode fornecer suas próprias traduções personalizadas (veja a opção 2 abaixo). Se fornecer o seu próprio, você precisará especificar todos os nomes de países (que podem ser copiados do projeto de lista de países, por exemplo, aqui estão os nomes dos países em francês), bem como algumas strings de UI (listadas abaixo). Veja exemplo.
Se atualmente não oferecemos suporte ao idioma que você precisa, é fácil contribuir com isso você mesmo - você só precisa fornecer algumas strings de tradução da IU, pois extraímos automaticamente os nomes dos países do projeto de lista de países.
Opção 1: importe um dos módulos de tradução fornecidos
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" ,
} ,
} ) ;Opção 2: defina suas próprias traduções 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" ,
}
} ) ; país inicial
Tipo: String Padrão: ""
Defina a seleção inicial do país especificando o código do país, por exemplo, "us" para os Estados Unidos. (Tenha cuidado para não fazer isso, a menos que você tenha certeza do país do usuário, pois isso pode levar a problemas complicados se definido incorretamente e o usuário preencher automaticamente seu número nacional e enviar o formulário sem verificar - em certos casos, isso pode passar na validação e você pode acabar armazenando um número com o código de discagem errado). Você também pode definir initialCountry como "auto" , que procurará o país do usuário com base em seu endereço IP (requer a opção geoIpLookup - veja o exemplo). Observe que, independentemente de como você usa initialCountry , ele não atualizará a seleção do país se a entrada já contiver um número com um código de discagem internacional.
loadUtilsOnInit (veja a discussão da v25)
Tipo: String ou () => Promise<module> Padrão: "" Exemplo: "/build/js/utils.js"
Esta é uma maneira de carregar (preguiçosamente) o utils.js incluído (para ativar a formatação/validação, etc.) - consulte Carregando o script de utilitários para obter mais opções. Você precisará hospedar o arquivo utils.js e, em seguida, definir a opção loadUtilsOnInit para esse URL ou, alternativamente, apenas apontá-lo para uma versão hospedada por CDN, por exemplo, "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" . O script é carregado por meio de uma instrução de importação dinâmica, o que significa que a URL não pode ser relativa – deve ser absoluta.
Alternativamente, esta pode ser uma função que retorna uma promessa para o módulo utils. Ao usar um bundler como o Webpack, isso pode ser usado para informar ao bundler que o script utils deve ser mantido em um arquivo separado do resto do seu código. Por exemplo: { loadUtilsOnInit: () => import("intl-tel-input/utils") } .
O script só é obtido quando você inicializa o plugin e, adicionalmente, somente quando a página termina de carregar (no evento de carregamento da janela) para evitar bloqueio (o script tem aproximadamente 260 KB). Ao instanciar o plugin, um objeto Promise é retornado sob a propriedade da instância promise , então você pode fazer algo como iti.promise.then(callback) para saber quando solicitações de inicialização como essa terminaram. Consulte Script de utilitários para obter mais informações.
modo nacional
Tipo: Boolean Padrão: true
Formate os números no formato nacional, em vez do formato internacional. Isso se aplica a números de espaço reservado e à exibição de números existentes de usuários. Observe que não há problema para os usuários digitarem seus números no formato nacional - desde que tenham selecionado o país certo, você pode usar getNumber para extrair um número internacional completo - veja o exemplo. Recomenda-se deixar esta opção habilitada, para incentivar os usuários a inserir seus números no formato nacional, pois normalmente é mais familiar para eles e cria uma melhor experiência de usuário.
somentePaíses
Tipo: Array Padrão: []
No menu suspenso, exiba apenas os países especificados - veja o exemplo.
espaço reservadoNumberType
Tipo: String Padrão: "MOBILE"
Especifique uma das chaves do enum intlTelInput.utils.numberType (por exemplo, "FIXED_LINE" ) para definir o tipo de número a ser usado para o espaço reservado. Brinque com esta opção no Storybook (usando o componente React).
mostrar bandeiras
Tipo: Boolean Padrão: true
Defina como falso para ocultar as bandeiras, por exemplo, por razões políticas. Em vez disso, mostrará um ícone de globo genérico. Brinque com esta opção no Storybook (usando o componente React).
códigoDial separado
Tipo: Boolean Padrão: false
Exiba o código de discagem internacional do país selecionado próximo à entrada, para que pareça que faz parte do número digitado. Como o usuário não pode editar o código de discagem exibido, ele pode tentar digitar um novo - neste caso, para evitar dois códigos de discagem próximos um do outro, abrimos automaticamente o menu suspenso do país e colocamos o novo código de discagem na entrada de pesquisa em vez de. Portanto, se eles digitarem +54, a Argentina será destacada no menu suspenso e eles poderão simplesmente pressionar Enter para selecioná-lo, atualizando o código de discagem exibido (este recurso requer allowDropdown e countrySearch estejam habilitados). Brinque com esta opção no Storybook (usando o componente React).
modo estrito
Tipo: Boolean Padrão: false
À medida que o usuário digita a entrada, ignore quaisquer caracteres irrelevantes. O usuário só pode inserir caracteres numéricos e um sinal de adição opcional no início. Limite o comprimento ao comprimento máximo do número válido (isso respeita validationNumberType ). Requer que o script utils seja carregado. Veja exemplo.
usarFullscreenPopup
Tipo: Boolean Padrão: true on mobile devices, false otherwise
Controle quando a lista de países aparece como um pop-up em tela cheia em vez de um menu suspenso embutido. Por padrão, ele aparecerá como um pop-up de tela cheia em dispositivos móveis (com base no agente do usuário e na largura da tela), para aproveitar melhor o espaço limitado (semelhante ao funcionamento de um <select> nativo) e como um menu suspenso embutido em dispositivos/telas maiores. Brinque com esta opção no Storybook (usando o componente React).
utilitárioScript
Tipo: String ou () => Promise<module> Padrão: "" Exemplo: "/build/js/utils.js"
Esta opção está obsoleta e foi renomeada para loadUtilsOnInit . Consulte os detalhes dessa opção e use-a.
validaçãoNumberType
Tipo: String Padrão: "MOBILE"
Especifique uma das chaves do enum intlTelInput.utils.numberType (por exemplo, "FIXED_LINE" ) para definir o tipo de número a ser aplicado durante a validação com isValidNumber , bem como o comprimento do número a ser aplicado com strictMode . Defina-o como null para não impor nenhum tipo específico.
Nestes exemplos, iti refere-se à instância do plugin que é retornada quando você inicializa o plugin, por exemplo
const iti = intlTelInput ( input ) ; destruir
Remova o plug-in da entrada e desvincule todos os ouvintes de eventos.
iti . destroy ( ) ; getExtensão
Obtenha o ramal do número atual. Requer que o script utils seja carregado.
const extension = iti . getExtension ( ) ; Retorna uma string, por exemplo, se o valor de entrada fosse "(702) 555-5555 ext. 1234" , isso retornaria "1234"
obterNúmero
Obtenha o número atual no formato fornecido (o padrão é o padrão E.164). Os diferentes formatos estão disponíveis no enum intlTelInput.utils.numberFormat - que você pode ver aqui. Requer que o script utils seja carregado. Observe que mesmo que nationalMode esteja habilitado, isso ainda poderá retornar um número internacional completo. Observe também que este método espera um número válido e, portanto, só deve ser usado após a validação.
const number = iti . getNumber ( ) ;
// or
const number = iti . getNumber ( intlTelInput . utils . numberFormat . E164 ) ; Retorna uma string, por exemplo, "+17024181234"
getNumberType
Obtenha o tipo (linha fixa/móvel/ligação gratuita, etc.) do número atual. Requer que o script utils seja carregado.
const numberType = iti . getNumberType ( ) ; Retorna um número inteiro, que você pode comparar com as várias opções no enum intlTelInput.utils.numberType , por exemplo
if ( numberType === intlTelInput . utils . numberType . MOBILE ) {
// is a mobile number
} Observe que nos EUA não há como diferenciar entre números fixos e móveis; portanto, ele retornará FIXED_LINE_OR_MOBILE .
getSelectedCountryData
Obtenha os dados do país atualmente selecionado.
const countryData = iti . getSelectedCountryData ( ) ;Retorna algo assim:
{
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} getValidationError
Obtenha mais informações sobre um erro de validação. Requer que o script utils seja carregado.
const error = iti . getValidationError ( ) ; Retorna um número inteiro, que você pode comparar com as várias opções no enum intlTelInput.utils.validationError , por exemplo
if ( error === intlTelInput . utils . validationError . TOO_SHORT ) {
// the number is too short
} éValidNumber
Verifique se o número atual é válido com base no seu comprimento - veja o exemplo, que deve ser suficiente para a maioria dos casos de uso. Consulte isValidNumberPrecise para uma validação mais precisa, mas a vantagem de isValidNumber é que ele é muito mais preparado para o futuro, pois, embora países ao redor do mundo atualizem regularmente suas regras numéricas, eles raramente alteram o comprimento dos números. Se este método retornar false , você poderá usar getValidationError para obter mais informações. Respeita a opção validationNumberType (que é definida como "MOBILE" por padrão). Requer que o script utils seja carregado.
const isValid = iti . isValidNumber ( ) ; Retorna: true / false
isValidNumberPrecise
Verifique se o número atual é válido usando regras de correspondência precisas para cada código de país/área, etc. - veja o exemplo. Observe que essas regras mudam a cada mês para vários países ao redor do mundo, então você precisa ter cuidado para manter o plugin atualizado, caso contrário você começará a rejeitar números válidos. Para uma forma de validação mais simples e preparada para o futuro, consulte isValidNumber acima. Se a validação falhar, você poderá usar getValidationError para obter mais informações. Requer que o script utils seja carregado.
const isValid = iti . isValidNumberPrecise ( ) ; Retorna: true / false
definirPaís
Altere o país selecionado. Deve ser raro, ou nunca, que você precise fazer isso, pois o país selecionado é atualizado automaticamente ao chamar setNumber e passar um número incluindo um código de discagem internacional, que é o uso recomendado. Observe que você pode omitir o argumento do código do país para definir o país para o estado vazio padrão (globo).
iti . setCountry ( "gb" ) ; definirNúmero
Insira um número e atualize o país selecionado de acordo. Observe que se formatOnDisplay estiver habilitado, isso tentará formatar o número para o formato nacional ou internacional de acordo com a opção nationalMode .
iti . setNumber ( "+447733123456" ) ; setPlaceholderNumberType
Altere a opção placeholderNumberType.
iti . setPlaceholderNumberType ( "FIXED_LINE" ) ; setDisabled
Atualiza o atributo desativado da entrada de telefone e do botão do país selecionado. Aceita um valor booleano. Nota: recomendamos usar isso em vez de atualizar diretamente o atributo desativado da entrada.
iti . setDisabled ( true ) ; getCountryData
Recupere os dados do país do plugin - para reutilizar em outro lugar, por exemplo, para gerar o menu suspenso do seu próprio país - veja o exemplo, ou alternativamente, você pode usá-lo para modificar os dados do país. Observe que quaisquer modificações devem ser feitas antes de inicializar o plugin.
const countryData = intlTelInput . getCountryData ( ) ;Retorna uma matriz de objetos de país:
[ {
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} , ... ] getInstance
Depois de inicializar o plugin, você sempre pode acessar a instância novamente usando este método, apenas passando o elemento de entrada relevante.
const input = document . querySelector ( '#phone' ) ;
const iti = intlTelInput . getInstance ( input ) ;
iti . isValidNumber ( ) ; // etc loadUtils (veja a discussão da v25)
Uma alternativa à opção loadUtilsOnInit , este método permite carregar manualmente o script utils.js sob demanda, para ativar a formatação/validação, etc. Consulte Carregando o script de utilitários para obter mais informações. Este método só deve ser chamado uma vez por página. Um objeto Promise é retornado para que você possa usar loadUtils().then(callback) para saber quando terminar.
// 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 */ } }
} ) ; Você pode ouvir os seguintes eventos acionados no elemento de entrada.
mudança de país
Isso é acionado quando o país selecionado é atualizado, por exemplo, se o usuário selecionar um país no menu suspenso, digitar um código de discagem diferente na entrada ou chamar setCountry etc.
input . addEventListener ( "countrychange" , function ( ) {
// do something with iti.getSelectedCountryData()
} ) ;Veja um exemplo aqui: Sincronização de país
abrir:país suspenso
Isso é acionado quando o usuário abre o menu suspenso.
fechar:país suspenso
Isso é acionado quando o usuário fecha o menu suspenso.
Existem muitas variáveis CSS disponíveis para temas. Consulte intlTelInput.scss para obter a lista completa.
Quanto ao estado vazio (ícone de globo), a versão padrão é cinza escuro, e também disponibilizamos uma versão "clara", que deve funcionar melhor com um tema escuro. Como alternativa, é fácil gerar novamente o ícone do globo na cor necessária para o seu tema. Recomendamos que você baixe na resolução mais alta possível e, em seguida, reduza a imagem para os tamanhos necessários (20px de largura para a versão padrão e 40px de largura para a versão @2x).
Exemplo de modo escuro (com captura de tela abaixo):
@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]" );
}
}
