jQuery maskedinput和表單重置

我在ZipCode和Phone Number字段的典型地址輸入表單上使用Josh Bush的jQuery的掩碼輸入插件（Masked Input）。jQuery maskedinput和表單重置

當我在窗體中顯示一條記錄並在有問題的字段上設置輸入掩碼時，表單最初顯示格式化的郵編（99999-9999）和電話號碼（999）999-9999。

但是，當我發佈表單重置時，輸入掩碼格式會消失，並且我留下了用於zip和電話的原始字段值999999999和9999999999。

這些字段在獲得焦點時確實格式正確，但我希望它們在重置後立即正確格式化。

任何想法如何使這個工作與一個通用的解決方案沒有循環的重點通過窗體上的所有領域？

我曾考慮將「data-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>

來源

2012-10-01 Lee Greco

注：我使用jQuery擴展方法「inputmask」而不是「mask」方法，因爲它存在於庫中，因爲與另一個庫有名稱衝突。這是重命名相同的方法。 –

你爲什麼不嘗試儘快重新分配輸入掩碼當您點擊復位按鈕..

$("button#FormReset").on("click", function(){ 
     $("form#AddEditAddress")[0].reset(); 
     $("input#ZipCode").unmask().inputmask("99999-9999"); 
     $("input#Phone").unmask().inputmask("(999)999-9999"); 
});

來源

2012-10-01 20:11:55

如果我知道事先已經應用了輸入掩碼的字段，這樣的事情可能會奏效。我真的想通過傳遞一個表單來實現它：function（$ form）{$ form [0] .reset（）; <更新被屏蔽的字段>}; –

jQuery maskedinput和表單重置

回答

相關問題