Input Mask on an input seems to remove preset values

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

cfuller priority asked 2 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 2 years ago

Hi. Can you provide a snippet with this issue? It will help a lot. Thanks. https://mdbootstrap.com/snippets/

Add comment

Michał Duszak staff answered 2 years ago

0 0 Best answer

<p>Hello,</p>

<p>if you want your <code>value</code> attribute to be shown in input instead of an inputMask placeholder as an initial value, you can use <code>data-mdb</code> attribute: <code>data-mdb-input-placeholder="false"</code>.It should work just fine, as <code>value</code> is still set if you look at the inspector. Here's a snippet, where the inputMask is applied, and the <code>value</code> is initially injected inside the input:</p>

<p><a href="https://mdbootstrap.com/snippets/standard/m-duszak/3190266" target="_blank">https://mdbootstrap.com/snippets/standard/m-duszak/3190266</a></p>

<p>so that your <code>input</code> element should look like this:</p>

<p>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!
<a href="https://i.imgur.com/6AzZ9o0.jpg" target="_blank" rel="nofollow">Here's a visual presentation</a></p>

Please insert min. 20 characters.

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 priority commented 2 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.

Add comment

Dawid Wajszczuk staff answered 2 years ago

0 0 Best answer

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 priority commented 2 years ago

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

Add comment

cfuller priority answered 2 years ago

0 0 Best answer

<p>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:</p>

<p><a href="https://mdbootstrap.com/snippets/standard/cfuller/3180425" target="_blank">https://mdbootstrap.com/snippets/standard/cfuller/3180425</a></p>

<p>In case it doesn't work, here is the code: </p>

<pre class="prettyprint"><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">
</code></pre>

Please insert min. 20 characters.

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

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Standard
MDB Version: MDB5 3.8.1
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

cfuller

60Support score
6Questions 3Answers 5Snippets