Clear (or change) the input mask from an input textbox (using Jasny)
I want to change the input mask of a textbox depending on the value selected in the select list. Code:
$(document).ready(function () {
$("#searchList").change(function () {
$("#searchCriteria").val("");
var value = $(this).find("option:selected").val();
switch (value) {
case "2":
$("#searchCriteria").inputmask({ mask: '999999', placeholder: '' });
break;
default:
alert('default'); // this alert pops up.
$("#searchCriteria") ///I want to clear the mask here.
}
});
});
I tried
$("#searchCriteria").unmask();
but get "Uncaught TypeError: $ (...). unmask is not an error function."
The documentation says '?' says that "any subsequent characters will become optional", so I tried $ ("# searchCriteria"). inputmask ({mask: '?', placeholder: ''});
without success.
It seems that once the mask has been set, it cannot be changed or cleared, but I'm sure there is a way.
I've also tried $ ("# searchCriteria"). unbind ();
Who cleared the mask but didn't set it to anything else.
EDIT: I am not tied to using Jasny, any other suggestions are welcome :)
The requirement I am trying to fulfill is "Change the input mask in the input text box to match the selection in the dropdown list."
source to share
Found the answer from this SO question:
How can I "reset" <& DIV GT; to its original state after it was changed by JavaScript?
Essentially, store the cloned state in a variable, and use that variable to restore the element's original state before re-assigning the mask.
Now the code looks like this: the switch statement is gone, but for some unknown reason:
$(document).ready(function () {
var searchCriteriaClone = $("#searchCriteria").clone();
$("#searchList").change(function () {
$("#searchCriteria").val("");
$("#searchCriteria").replaceWith(searchCriteriaClone.clone());
var value = $(this).find("option:selected").val();
if (value === "2") {
$("#searchCriteria").inputmask({ mask: "999999", placeholder: "" });
}
});
});
source to share