Phone Number

@jiordiviera 325 XP a posé

dans

• Résolu

Bonjour, comment implementer svp avec Alpine.js l'input tel present dans la page profil; C'est à dire avec les pays et l'adaptivité en fonction du nombre de caractères pris en fonction de chaque pays(eg: cameroun: +237 682xxxxxx).

Kengne tchinda jiordi viera @jiordiviera il y a 6 mois

Kengne tchinda jiordi viera @jiordiviera 325 XP · il y a 6 mois

Je viens de voir https://github.com/nnjeim/world sur GitHub Merci

Je viens de voir https://github.com/nnjeim/world sur GitHub Merci

Arthur Monney @mckenziearts il y a 6 mois

Arthur Monney @mckenziearts 2043 XP · il y a 6 mois

Réponse acceptée

Tu peux utiliser la librairie int tel input. J'ai deja eu a mettre ca en place avec AlpineJS. Après avoir installé la lib dans ton projet tu peux faire quelque chose comme ceci

Code AlpineJs.

// internationalNumber.js
import intlTelInput from 'intl-tel-input'
 
export default (element) => ({
  input: element,
 
  init() {
    const phoneNumber = document.querySelector(this.input);
    let iti = intlTelInput(phoneNumber, {
      nationalMode: true,
      geoIpLookup: function(success, failure) {
        fetch('https://ipinfo.io').then(response => {
          let countryCode = (response && response.country) ? response.country : 'CM'
          success(countryCode)
        })
      },
      utilsScript: 'https://unpkg.com/[email protected]/build/js/utils.js'
    })
    let handleChange = () => {
      if (iti.isValidNumber()) {
        phoneNumber.value = iti.getNumber()
      }
    };
    phoneNumber.addEventListener('change', handleChange)
    phoneNumber.addEventListener('keyup', handleChange)
  }
})

Et dans ton fichier javascript principal ou tu charges AlpineJS tu peux faire ceci

import internationalNumber from './internationalNumber'
 
Alpine.data('internationalNumber', internationalNumber)
 
Alpine.start()

Et puis n'importe ou dans un fichier blade.php tu peux juste faire ceci

<div wire:ignore x-data="internationalNumber('#phone_number')" class="col-span-6 sm:col-span-3">
    <x-forms.group for="phone_number" :label="__('Phone Number')">
        <x-forms.input wire:model.defer="phone_number" id="phone_number" type="tel" class="pr-10" autocomplete="off" />
        @error('shop_phone_number')
            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                <svg class="w-5 h-5 text-danger-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
            </div>
        @enderror
    </x-forms.group>
</div>

Biensur tu adaptes les composants ou tu les remplaces par tes inputs