Input Mask on an input seems to remove preset values


Topic: Input Mask on an input seems to remove preset values

cfuller asked 3 years ago

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.)'


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/


Michał Duszak staff answered 3 years ago

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.


cfuller answered 3 years ago

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

Dawid Wajszczuk staff answered 3 years ago

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


cfuller commented 3 years ago

Any guestimate on how long it might take to fix this?


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • 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
Tags