同じMvcビュー内の他のテキストボックスからテキストボックスにテキストを追加するJquery

Question

私は、mvcビューのFirstName、LastName、UserNameのフォームに3つのテキストボックスを持っています。 UserNameはFirstName + LastNameである必要があります。私はFirstNameフィールドの文字をFirstName.KeyUpイベントのUserNameに追加する次のJqueryを試しましたが、UserNameにLastNameフィールドの文字を追加すると、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

あなたは、入力値（姓と名の）の両方を読んで、最終的な値を取得し、まだユーザー名の入力値を上書きすることを追加することができます。

$(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").keyup(function() { 
     $("#UserName").val($(this).val() + ' ' + $("#LastName").val()); 
    }); 
    $("#LastName").keyup(function() { 
     $("#UserName").val($("#FirstName").val() + ' ' + $(this).val()); 
    }); 

を作成する必要があります