0

Josh BushによるjQueryのMaskedInputプラグイン（Masked Input）を、ZipCodeフィールドとPhoneNumberフィールドの一般的な住所入力フォームで使用しています。

フォームにレコードを表示し、問題のフィールドに入力マスクを設定すると、フォームには最初にフォーマットされた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>
4

1 に答える 1

0

リセットボタンをクリックしたらすぐに入力マスクを再割り当てしてみてはいかがでしょうか..

$("button#FormReset").on("click", function(){
        $("form#AddEditAddress")[0].reset();
        $("input#ZipCode").unmask().inputmask("99999-9999");
        $("input#Phone").unmask().inputmask("(999)999-9999");
});
于 2012-10-01T20:11:55.270 に答える