Inputmask for programatically set value

Topic: Inputmask for programatically set value

davesmacer priority asked 7 months ago

Hi,

The input mask is not working when I programatically set a value to an input using jquery .val(). Is there anyway in which you recommend that we update values for the input masks inputs?

I fixed my error by setting the attributes of the input mask like this:

var ovMask = Inputmask.getInstance($(#SUnit_Modal)[0]); ovMask._previousValue = svPreFocus; ovMask._value = svPreFocus; ovMask._initialValue = svPreFocus; ovMask._isEmpty = (svPreFocus == "") || (svPreFocus == null); ovMask._futureCaretPosition = svPreFocus.length; ovMask.inputPlaceholder = "____";

But you should fix this IMO

Best Regards

Add comment

davesmacer priority answered 7 months ago

0 0 Best answer

I thought it was solved, but not really... In this snippet the placeholder gets messed up... Again, it seems like setting values even with plain JS is not working, if the user deletes the value to change it it says undefined instead of setting the placeholder. Snippet:
<a href="https://mdbootstrap.com/snippets/standard/davesmacer/5648270" target="_blank">https://mdbootstrap.com/snippets/standard/davesmacer/5648270</a>

The only workaround would be:

<pre class="prettyprint"><code>var svPreFocus = $(`#SUnit_Modal`).val();
var ovMask = Inputmask.getInstance($(`#SUnit_Modal`)[0]);
ovMask._previousValue = svPreFocus;
ovMask._value = svPreFocus;
ovMask._initialValue = svPreFocus;
ovMask._isEmpty = (svPreFocus == "") || (svPreFocus == null);
ovMask._futureCaretPosition = svPreFocus.length;
ovMask._inputPlaceholder = "___________";
$(`#SUnit_Modal`).focus();
</code></pre>

_inputPlaceholder needs to get a valid value before starting to change, i had to debug the thing to get it working.

Please insert min. 20 characters.

I thought it was solved, but not really... In this snippet the placeholder gets messed up... Again, it seems like setting values even with plain JS is not working, if the user deletes the value to change it it says undefined instead of setting the placeholder. Snippet: https://mdbootstrap.com/snippets/standard/davesmacer/5648270

The only workaround would be:

var svPreFocus = $(`#SUnit_Modal`).val();
var ovMask = Inputmask.getInstance($(`#SUnit_Modal`)[0]);
ovMask._previousValue = svPreFocus;
ovMask._value = svPreFocus;
ovMask._initialValue = svPreFocus;
ovMask._isEmpty = (svPreFocus == "") || (svPreFocus == null);
ovMask._futureCaretPosition = svPreFocus.length;
ovMask._inputPlaceholder = "___________";
$(`#SUnit_Modal`).focus();

_inputPlaceholder needs to get a valid value before starting to change, i had to debug the thing to get it working.

Add comment

Kamila Pieńkowska staff answered 7 months ago

0 0 Best answer

This problem is caused by jQuery focus. Change $("#basic-example").focus(); to document.getElementById('basic-example').focus() and it won't occur.

davesmacer priority commented 7 months ago

I just updated the snippet, doesn't work either, if I delete one character from the assigned value, it places "undefined" as placeholder instead of "_"

Kamila Pieńkowska staff commented 7 months ago

This is a bug and we will fix it.

Add comment

Kamila Pieńkowska staff answered 7 months ago

0 1 Best answer

Here is new snippet: https://mdbootstrap.com/snippets/standard/kpienkowska/5639139

davesmacer priority commented 7 months ago

I created a fork of your snippet. It might work in a very simple setup, but once I set focus on the control, the value is lost. There's a need of rewriting it and when the mask is big is so annoying. Snippet:

https://mdbootstrap.com/snippets/standard/davesmacer/5640933

Kamila Pieńkowska staff commented 7 months ago

You have to publish your snippet for me to have access to it.

davesmacer priority commented 7 months ago

Sorry, it's published now

Grzegorz Bujański staff commented 7 months ago

We'll check it. For now, I recommend using pure JS: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5647461#js-tab-view

Add comment

Kamila Pieńkowska staff answered 7 months ago

0 1 Best answer