I have two textbox.I want to copy the text in key press event fron one textbox to another in jquery

$(document).ready(function() {
  $(".first").keydown(function() {
    $(".second").value($(".first").value);
  });
});

<script src=".1.1/jquery.min.js"></script>

Enter your name:
<input type="text" class="first">
<input type="text" class="second">

I have two textbox.I want to copy the text in key press event fron one textbox to another in jquery

$(document).ready(function() {
  $(".first").keydown(function() {
    $(".second").value($(".first").value);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Enter your name:
<input type="text" class="first">
<input type="text" class="second">

• javascript
• jquery
• html
• text
• input

• 2 Closing as a typo. The method is val(), not value. Please familiarise yourself with the jQuery documentation: api.jquery./val – Rory McCrossan Commented Feb 14, 2017 at 8:56

7 Answers 7

1. In jQuery you want to use the val function and not the value property.
2. You should use keyup event instead of keydown to copy correctly

$(document).ready(function(){
    $(".first").keyup(function(){
        $(".second").val($(".first").val());
    });
    
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>




Enter your name: <input type="text" class="first">
<input type="text" class="second">

$(document).ready(function(){
    $(".first").keydown(function(){
        $(".second").val($(".first").val());
    });
    
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>




Enter your name: <input type="text" class="first">
<input type="text" class="second">

Use jQuery's 'val' method here to achieve this.

I would also remend using jQuery's 'keyup' instead of 'keydown'. If you do it on keydown you will always be one letter behind.

$(document).ready(function() {
  $(".first").keyup(function() {
    $(".second").val($(".first").val());
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter your name:
<input type="text" class="first">
<input type="text" class="second">

Try this

$(document).ready(function(){

$(".first").keydown(function(){
    $(".second").val($(".first").val());
});

});

try this one

$(document).ready(function() {
  $(".first").keyup(function() {
    $(".second").val($(".first").val());
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>




Enter your name: <input type="text" class="first">
<input type="text" class="second">

Try this:

$(document).ready(function(){
    $(".second").click(function(){
        $(".second").val($(".first").val());
    });
    
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>




Enter your name: <input type="text" class="first">
<input type="text" class="second">

Your code is right but jquery hasn't .value() method. You should use .val() instead.

$(".first").keydown(function(){
  $(".second").val($(this).val());
  // or
  $(".second").val(this.value);
});

$(".first").keydown(function(){
  $(".second").val($(".first").val());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter your name: 
<input type="text" class="first">
<input type="text" class="second">

Also to better performance, add keyup and change event to element. The .on() is good method to adding multiple event to element.

$(".first").on("keydown keyup change", function(){
  $(".second").val(this.value);
});

$(".first").on("keydown keyup change", function(){
  $(".second").val(this.value);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter your name: 
<input type="text" class="first">
<input type="text" class="second">