我在 ZipCode 和 Phone Number 字段的典型地址输入表单上使用Josh Bush 的 Masked Input 插件( Masked Input )。
当我在表单中显示记录并在相关字段上设置输入掩码时,表单最初显示格式化的 zip (99999-9999) 和电话号码 (999)999-9999。
但是,当我发出表单重置时,输入掩码格式消失了,我留下了 zip 和电话的原始字段值 999999999 和 9999999999。
这些字段在获得焦点时会正确格式化,但我希望它们在重置后立即正确格式化。
知道如何让它与通用解决方案一起使用,而无需在表单上的所有字段中循环关注吗?
我考虑将“data-inputmask”属性添加到适当的字段并调用一个通用函数,该函数使用该属性在表单加载时建立输入掩码,但这个示例是我实际维护和访问的代码的简化在项目中使用 inputmask 是不可行的。
这是表单和脚本的简化版本:
<form action="/User/UpdateAddress" id="AddEditAddress" method="post" novalidate="novalidate">
<input id="AddressId" name="AddressId" type="hidden" value="A5A715C7-C5DD-4793-A3D8-CE101F83224B" />
<label for="FirstName" title="First Name">First Name</label>
<input id="FirstName" name="FirstName" type="text" value="John" />
<label for="LastName" title="Last Name">Last Name</label>
<input id="LastName" name="LastName" type="text" value="Doe" />
<label for="Address1" title="Address 1">Address 1</label>
<input id="Address1" name="Address1" type="text" value="123 Main St" />
<label for="Address2" title="Address 2">Address 2</label>
<input id="Address2" name="Address2" type="text" value="Apartment 123" />
<label for="City" title="City">City</label>
<input id="City" name="City" type="text" value="Anytown" />
<label for="State" title="State">State</label>
<input id="State" name="State" type="text" value="PA" />
<label for="ZipCode" title="Zip Code">Zip Code</label>
<input id="ZipCode" name="ZipCode" type="text" value="191234567" />
<label for="Phone" title="Phone">Phone</label>
<input id="Phone" name="Phone" type="text" value="2155551234" />
</form>
<button id="FormReset">Reset</button>
<button id="FormSubmit">Submit</button>
<script type="text/javascript">
$("input#ZipCode").inputmask("99999-9999");
$("input#Phone").inputmask("(999)999-9999");
$("button#FormReset").on("click", function(){
$("form#AddEditAddress")[0].reset();
});
$("button#FormSubmit").on("click", function(){
$("form#AddEditAddress")[0].submit();
});
</script>