Hi everybody,

Through NuGet I downloaded jquery Masked Input from http://digitalbush.com/

I then added it to bundles.config this way

 bundles.Add(new ScriptBundle("~/bundles/jqueryMaskedInput").Include(
              "~/Scripts/jquery.maskedinput-{version}.js"));

and then in my EditorTemplate PhoneInfo.cshtml as

@model CardNumbers.Objects.PhoneInfo

<div id="PhoneInfo">
    <div class="float-left">        
        <div class="editor-label">
            @Html.LabelFor(model => model.Phone)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Phone, new { @class = "phone" })
            @Html.ValidationMessageFor(model => model.Phone)
        </div>
    </div>
    <div class="float-right">
        @*@Html.EditorFor(model => model.Ext, EditorTemplate.TextBox)*@
        <div class="editor-label">
            @Html.LabelFor(model => model.Ext)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Ext)
            @Html.ValidationMessageFor(model => model.Ext)
        </div>
    </div>
</div>

and finally in my _ClientForm.cshtml

@using CardNumbers.Helper
@model CardNumbers.Models.ClientViewModel
  @*<form id="add-edit-form">*@
@Styles.Render("~/Content/themes/base/css")
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "add-edit-form"}))
{
    <fieldset>
        <legend>Client Info</legend>

        @Html.ValidationSummary(true)
       
        <input type="hidden" id="fntype" name="fntype" value="Edit">

        @Html.HiddenFor(m => m.ClientId)
        @Html.EditorFor(m => m.ClientNumber, EditorTemplate.TextBox)

        @Html.EditorFor(m => m.ClientName, EditorTemplate.TextBox)

        @Html.EditorFor(m => m.Client.Address, EditorTemplate.EditBox)

        <div id="ContactsInfo">

            <div id="Contact1">

                @Html.EditorFor(m => m.Client.Contact1)

            </div>

            <div id="Contact2">

                @Html.EditorFor(m => m.Client.Contact2)
            </div>
        </div>

       @* <div id="SaveCancel" class="float-right">
            <button id="btnSave">Save</button>
            <button type="reset" id ="btnCancel" name="Reset">Cancel</button>
        </div>*@
    </fieldset>

}
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/jqueryval")
 @Scripts.Render("~/bundles/jqueryui")
 @Scripts.Render("~/bundles/jqueryMaskedInput")

<script type="text/javascript">$(".phone").mask("(999)-999-9999");</script>

So, one question here is - may be I ought to put that script tag and reference to the masked input in the PhoneInfo.cstml instead of the form?

In any case, when I go to the phone textbox I see the mask, but the first character I try to put somehow end at the second position and then all other strange behavior follows. Also, I believe I've tested this on Friday and it seemed to work to me then, but today this is the behavior I am seeing - I can not properly type.

I am testing today in Google Chrome.

Do you see what I am doing wrong here or could it be a bug in that class I need to speak with the developer?