Jquery在EditorTemplate上检测TextBox内容更改

时间:2012-05-15 01:09:14

标签: javascript asp.net-mvc-3 jquery-ui c#-4.0

我需要检测文本框中的值是否已更改。 如果文本框内容被更改/修改,我需要显示一个textBox并强制用户输入一些关于更改的注释。

这是我的EditorTemplate页面,位于Shared / EditorTemplates / Addresses.cshtml

@Html.EditorFor(model => model.Address)
@Html.ValidationMessageFor(model => model.model.Address))
@Html.EditorFor(model => model.Comments,new{style="Visible:false" })
@Html.ValidationMessageFor(model => model.Comments ,new{style="Visible:false" })

这是MyPage.cshtml,我调用上面的EditorTemplate

 @if (!UtilityHelper.IsNullOrEmpty(Model.AddressesRecords))
        {

             @Html.EditorFor(model => model.AddressesRecords)

         }

     <input type="submit" name="ButtonCommand" value="Save" />

加载页面时,会有多个地址文本框。如果用户对任何地址TextBox进行任何修改,则立即使CommentsTextBox在特定地址TextBox中可见,并启用验证。

因此,当我单击“保存”按钮时,我需要确保用户在CommentsTextBox中键入了一些注释。 如果用户单击“保存”按钮而不更改地址文本框,则记录将被保存。

在运行时,我可以看到编辑器id是动态生成的,如AddressesRecords_0_Address,AddressesRecords_1_Address ......

我尝试了一些Jquery,但这似乎永远不会起作用,因为实际的AddressTextBox id是动态生成的。

<script type="text/javascript">


    $(document).ready(function(){

       var $el = $('#AddressesRecords_0_Address');
       $el.data('oldVal',  $el.val() );


       $el.change(function(){

            $("#AddressesRecords_0_Comments").show();
       })

    });
</script>

这里如何将我的Jquery更改函数附加到我的每个addressTextBox?

1 个答案:

答案 0 :(得分:0)

假设我有3个不同的文本框,名为TextBox1,TextBox2和TextBox3,此代码将检查这些字段中的任何更改并显示“注释”字段

$('#TextBox1, #TextBox2, #TextBox3').each(function () {
    $(this).data('oldVal', $(this).val());
    $(this).bind("propertychange keyup input paste", function (event) {
        if ($(this).data('oldVal') != $(this).val()) {
            $(this).data('oldVal', $(this).val());

            $('#Comments').show();
        }
    });
});

您还可以为每个字段分配一个类,并按照这样做

$('.MyClass').each(function () {
    $(this).data('oldVal', $(this).val());
    $(this).bind("propertychange keyup input paste", function (event) {
        if ($(this).data('oldVal') != $(this).val()) {
            $(this).data('oldVal', $(this).val());

            $('#Comments').show();
        }
    });
});