cms-laravel/resources/views/livewire/input-mask-number-form.blad...

33 lines
1.2 KiB
PHP

<div class="mb-3">
<label for="{{ $name }}" class="form-label">{{ $label }}</label>
<input type="text" wire:model="value" class="form-control" id="{{ $name }}" {{ $required ? 'required' : '' }} data-mask="{{ $mask }}">
@error('value')
<div class="text-danger small">{{ $message }}</div>
@enderror
</div>
<script>
document.addEventListener('livewire:load', function () {
const inputs = document.querySelectorAll('[data-mask]');
inputs.forEach(input => {
const mask = input.getAttribute('data-mask');
input.addEventListener('input', function (e) {
let value = e.target.value.replace(/\D/g, '');
let formatted = '';
let maskIndex = 0;
for (let i = 0; i < value.length && maskIndex < mask.length; i++) {
if (mask[maskIndex] === '9') {
formatted += value[i];
maskIndex++;
} else {
formatted += mask[maskIndex];
maskIndex++;
i--; // Stay on the same digit
}
}
e.target.value = formatted;
@this.set('value', formatted);
});
});
});
</script>