当我从电话输入中删除值时，我想删除电话号码

Question

我正在使用 victorybiz/laravel-tel-input 并且我的 laravel 项目中有组件。所以问题是，当我输入电话号码并删除号码后，使用选择删除整个号码，然后再次将号码设置到我的输入框。

我创建了如下组件：

@props([
    'wireModel' => $attributes->whereStartsWith('wire:model')->first(),
])

<div>
    <x-tel-input
        id="phone"
        name="phone"
        class="h-[48px] w-full border-gray focus:ring-4 focus:ring-primary-light focus:border-primary text-black px-4 py-3.5 text-sm md:text-base placeholder-dark-gray placeholder-opacity-90 rounded-lg"
        {{ $attributes->merge(['wire:model' => $wireModel]) }}
    />
    <p class="text-sm text-red" id="error_phone"></p>
</div>
@push('scripts')
    <script>
        const input = document.getElementById('phone');
        const error = document.getElementById("error_phone");

        input.addEventListener('telchange', function(e) {
            if (e.detail.number != '') {
                if (e.detail.valid && e.detail.number.length >= 6) {
                    @if($wireModel)
                        @this.set('{{ $wireModel }}', e.detail.number);
                    @endif
                    error.textContent = null;
                } else {
                    error.textContent = "{{ __("Please enter a valid number") }}";
                }
            }
        });

        window.addEventListener('refreshTelJs', event => {
            var element = document.querySelector('.iti--allow-dropdown');

            if(!element){
                document.dispatchEvent(new Event('telDOMChanged'));
            }
        });

        document.dispatchEvent(new Event('telDOMChanged'));
    </script>
@endpush

我正在使用这个组件，例如：

<div wire:ignore>
   <x-input-tel id="phone" name="phone" class="block mt-1 w-full" wire:model.defer="phone"/>
   <x-jet-input-error for="phone" class="mt-1"/>
</div>

当我删除号码时，我想从输入框中删除号码。并使用 Laravel 和 Livewire。

有关此软件包的更多信息，您可以在这里找到：https://github.com/victorybiz/laravel-tel-input

Answer 1

回答

-> 要在用户删除输入框中的电话号码时将其从输入框中删除，可以使用以下 JavaScript 代码：

const phoneInput = document.getElementById('phone');

phoneInput.addEventListener('input', function(e) {
  if (e.target.value === '') {
    // Clear the phone number from the Livewire model.
    @this.set('phone', '');
  }
});

-> 此代码将侦听手机输入字段上的输入事件。当用户在输入字段中输入空字符串时，代码将从 Livewire 模型中清除电话号码。

-> 要使用此代码，您需要将其添加到 Livewire 组件的脚本部分。然后，您可以像这样在视图中使用该组件：

<div wire:ignore>
   <x-input-tel id="phone" name="phone"
 
class="block
 
mt-1 w-full" wire:model.defer="phone"/>
   <x-jet-input-error
 
for="phone" class="mt-1"/>
</div>

-> 将代码添加到组件和视图后，您将能够通过在字段中输入空字符串并按

从输入框中删除电话号码

-> 我认为这会对您有所帮助。