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

pkln4tw6 于 12个月前发布在其他

关注(0)|答案(1)|浏览(151)

我使用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

laravel

来源：https://stackoverflow.com/questions/77314990/i-want-to-delete-phone-number-when-i-remove-value-from-tel-input

1条答案

按热度按时间

zynd9foi1#

回答

->要在用户删除输入框中的电话号码时将其删除，可以使用以下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组件的scripts部分。然后您可以在视图中使用此组件，如下所示：

<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>

型
->将代码添加到组件和视图后，您将能够通过在字段中输入空字符串并按
”我认为这将帮助你。

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答