Phone Number

jiordiviera @jiordiviera 305 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).

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

  • 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)
    })
    },
    })
    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
    </div>

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

  • Merci

Veuillez vous connecter ou créer un compte pour participer à cette conversation.