Question

我的mvc视图中的表单上有3个文本框，FirstName，LastName，UserName。 UserName需要是FirstName + LastName。我尝试了下面的Jquery，它将在FirstName.KeyUp事件中将FirstName字段的字母添加到UserName，但是当我将LastName字段中的字母添加到UserName时，它会覆盖FirstName字母（实际上我只需要第一个字母的姓）。什么是Jquery这个“附加”字母而不是覆盖？ KeyUp是一个很好的事件 - 也许LostFocus或其他什么？或者我应该使用返回带有return关键字的值的函数？这种方法的Jquery是什么？

@using (Html.BeginForm()) {

    <fieldset>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
            @Html.ValidationMessageFor(model => model.UserName)
        </div>
    </fieldset>
}


<script type="text/javascript">

    $(function () {

        $("#FirstName").keyup(function () {            
            $("#UserName").val(this.value);
        });
        $("#LastName").keyup(function () {
            $("#UserName").val(this.value);
        });

    });

</script>

Answer 1

您可以读取两个输入值（ FirstName和LastName ）并附加它以获取最终值，并仍然覆盖UserName输入值。

$(function(){

   $("#FirstName").keyup(function () {            
        $("#UserName").val($(this).val()+ $("#LastName").val());
   });

   $("#LastName").keyup(function () {
         $("#UserName").val( $("#FirstName").val()+$(this).val());
   });

});

如果您只想添加姓氏的第一个字母，可以执行此操作

$(function(){

   $("#FirstName").keyup(function () {   
        var lastName = $("#LastName").val();
        if(lastName!=='')
        {
           lastName=lastName.charAt(0);               
        }
        $("#UserName").val($(this).val()+ lastName);
   });

   $("#LastName").keyup(function () {
        var lastName = $(this).val();
        if(lastName!=='')
        {
            lastName=lastName.charAt(0);               
        }
        $("#UserName").val( $("#FirstName").val()+lastName);
   });

});

Here是一个有效的jsfiddle。

Answer 2

在Firstname和Lastname之间添加空格，然后您需要编写此代码

$("#FirstName").keyup(function () {
        $("#UserName").val($(this).val() + ' ' + $("#LastName").val());
    });
    $("#LastName").keyup(function () {
        $("#UserName").val($("#FirstName").val() + ' ' + $(this).val());
    });

Jquery在同一个Mvc视图中的其他文本框中附加文本框中的文本

2 个答案: