Topic: Input Mask on an input seems to remove preset values
It appears as though the inputMask is ignoring any present "value" provided on an input. I've ready through the input and inputMask instructions on the mdbootstrap.com site, but can find no reference to it. Please help. Thanks!
Expected behavior Input, if there is no value, it would use the placeholder and input mask. If there is a value pre-set on the input it should show that value and use it as the input if not changed.
Actual behavior Even if the "value" is passed on the input it seems to be ignored, and the placeholder is put there instead when the "inputMask" class is added.
Resources (screenshots, code snippets etc.)'
Hello,
if you want your value attribute to be shown in input instead of an inputMask placeholder as an initial value, you can use data-mdb attribute: data-mdb-input-placeholder="false".It should work just fine, as value is still set if you look at the inspector. Here's a snippet, where the inputMask is applied, and the value is initially injected inside the input:
https://mdbootstrap.com/snippets/standard/m-duszak/3190266
so that your input element should look like this:
<input id="inp_1"
type="tel"
name="dtaFld_6"
value="(727) 123-4567"
class="form-control form-control-lg fs-4 inputMask active"
placeholder="(999) 999-9999"
data-mdb-input-placeholder="false"
data-mdb-input-mask="(999) 999-9999">
I even made a button which alerts you with the actual value that's inside. If you delete the value in the input, placeholder comes in, and the value is empty! Here's a visual presentation
cfuller commented 3 years ago
That worked. Thank you. I would suggest considering putting that on your documentation page, as I couldn't find any reference to it when I was reviewing how to get this fixed.
Good Morning, the embedded sample in the original post was a snippet. I've not used your snippet tool before, so not sure how I am supposed to share it. Let's try this link from the share button of the snippet:
https://mdbootstrap.com/snippets/standard/cfuller/3180425
In case it doesn't work, here is the code:
<label for="inp_1" class="form-label fs-5">Not Working</label>
<input id="inp_1"
type="tel"
name="dtaFld_6"
value="(727) 123-4567"
class="form-control form-control-lg fs-4 inputMask active"
placeholder="(999) 999-9999"
data-mdb-input-mask="(999) 999-9999">
<hr>
<label for="inp_2" class="form-label fs-5">Working Without inputMask</label>
<input id="inp_2"
type="tel"
name="dtaFld_6"
value="(727) 123-4567"
class="form-control form-control-lg fs-4"
placeholder="(999) 999-9999">
<hr>
<label for="inp_3" class="form-label fs-5">Testing ZipCode with inputMask</label>
<input id="inp_3"
type="text"
name="zip"
value="12345-1234"
class="form-control form-control-lg fs-4 inputMask active"
placeholder="99999-9999"
data-mdb-input-mask="99999-9999">
<hr>
<label for="inp_4" class="form-label fs-5">Testing ZipCode without inputMask</label>
<input id="inp_4"
type="text"
name="zip"
value="12345-1234"
class="form-control form-control-lg fs-4"
placeholder="99999-9999">
Hi,
Your snippet works fine. As for your issue, we will take a closer look at this case and see what we can do about it.
Keep coding,
Dawid
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.8.1
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Dawid Wajszczuk staff commented 3 years ago
Hi. Can you provide a snippet with this issue? It will help a lot. Thanks. https://mdbootstrap.com/snippets/