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."
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: "" });
}
});
});
try it
$("#searchCriteria").trigger("unmask");