Topic: Inputmask for programatically set value
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
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.
You can use jquery .val() but you need to signal to plugin that there was input.
Example: https://mdbootstrap.com/snippets/standard/kpienkowska/5630022#js-tab-view
davesmacer pro premium priority commented a year ago
I can't access the snippet... But I tried basically everything using val(). Nothing works as expected
Here is new snippet: https://mdbootstrap.com/snippets/standard/kpienkowska/5639139
davesmacer pro premium priority commented a year 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 a year ago
You have to publish your snippet for me to have access to it.
davesmacer pro premium priority commented a year ago
Sorry, it's published now
Grzegorz Bujański staff commented a year ago
We'll check it. For now, I recommend using pure JS: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5647461#js-tab-view
This problem is caused by jQuery focus. Change $("#basic-example").focus(); to document.getElementById('basic-example').focus() and it won't occur.
davesmacer pro premium priority commented a year 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 a year ago
This is a bug and we will fix it.
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 6.4.1
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No