How to auto populate input on HTML form based on previous text input

Question

Help! I'm fumbling my way through some jQuery.

This seems like the perfect solution:

<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">

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

however for some reason it doesn't populate on the first keystroke until the second keystroke is hit. the problem being unless the users adds a space, or tabs to the next field the last character is left off the auto populate

Any ideas?

http://jsfiddle.net/fmdwv/1/

Answer 1

The issue is the keydown . If you bind to input or keyup then the code works as you expect it to. (Of course, with keyup it's different as if you hold it down it won't fire until you let go, which can lead to some unexpected behavior. The answer by @GolezTrol is a good alternative if input is out of the question)

The reason is that keydown fires before the value is entered, so on that first keydown event the val() of .first is "" (An empty string).

Answer 2

The value isn't there right away, because the keydown message still needs to be processed. You could use keyup, but the disadvantage of keyup, is the delay it has. The first box changes on keydown, and even changes when you hold a key. The second box updates when you release the key, but at that point nothing changes in the first box. That delay feels awkward when you look at it.

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="first" placeholder="type here"> <input type="text" class="second" placeholder="here it is the reuslt"> 

You could also use the input event, as Angel Joseph Piscola rightfully mentions, but browser support isn't perfect yet, (although the most important browsers do support it quite well). Anyway, make sure to check if it supports the platforms you want.

So that may be a good option, depending, but there is another solution. If you use setTimeout , you can delay the processing of the key. You can even specify 0 ms. What you actually do, is wait for a signal. The timer sends a signal which is processed by your callback, just as your keydown handler. But the processing of the keydown message is already queued, so that is handled first. By using setTimeout with a timeout of 0, you will just get another callback called as soon as possible, but after the keyup signal is processed.

As you can see, it works perfectly, you get smooth updates, practically immediately when the first box changes, and even when holding down a key.

 $(".first").on('keydown',function(){ var me = this; setTimeout(function(){ $(".second").val($(me).val()); }, 1); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="first" placeholder="type here"> <input type="text" class="second" placeholder="here it is the reuslt"> 

Answer 3

Use keyup instead of keydown. It works!