CODEWITHSUNDEEP
htmljquery
Designer
Designer

Reputation: 895

When type on an input field pass the text to another field using jquery or js

I have two input fields. I need every time i type inside first div to pass the text to the second field. The problem is that with my code below it cuts the last letter! What i 'm doing wrong ?

$(".first").bind('keydown', function(e){
$(".second").val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the result">

Upvotes: 0

Views: 28

Answers (2)

Simone Rossaini
Simone Rossaini

Reputation: 8162

it's not cut, simple you are not focus on second but if you click on that and overflow to right you will see you have all complete word i add example with console.log

$(".first").on('input', function(e) {
$(".second").val($(this).val());
console.log($(".first").val()+' = ' + $(".second").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the result">

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28621

it cuts last letter

It's not that it's cutting the input: you're processing the textbox before your key press has updated the value - keydown occurs first.

Use keyup or a better replacement would be input which would also capture copy+paste etc

$(".first").on('input', function(e) {
  $(".second").val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the result">

Upvotes: 2

Related Questions