Topic: issue related to the masking of the fields. Prefilled values got vanished when the field is clicked.
Expected behavior I am expecting, When I click the prefilled mask field. I should be able to edit the values inside the field.Like if the prefill values are (123-123) when I click on that field , I must be able to edit the existing values, not start wrting again all the values. Actual behavior When I am adding the default value (sames as mask format) in the mask field. The value is getting displayed, but when i click inside in the field(focus).All the data inside the the field got vanished.
Resources (screenshots, code snippets etc.)
<input type="text" id="jform_socila" name="jform[socila]" value="54-666666" required="" data-mdb-input-mask-init="" data-mdb-input-mask="99-999999" data-mdb-mask-placeholder="true" data-mdb-char-placeholder="xx-xxxxxx" class="form-control form-control-lg required valid active form-control-success" aria-invalid="false">
Unfortunately, you need to trigger the event input for the input mask to perceive that it has a value. So adding something like this for this will help:
const input = document.querySelector('input');
input.dispatchEvent(new Event('input', { bubbles: true }));
Or you can use this event to set value.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 8.2.0
- Device: PC
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No