入力フォームから次の入力フォームに移動させたい

Question

初心者です。用語等あまりわからず、かなりわかりづらいと思いますが、読んでいただければ幸いです。
絵文字を使ったパスワードを2つ、DBに登録するwebシステムを作っています。
2つの入力フォームに、ボタンを押して絵文字を登録していくという方法です。
a1に4文字入ったらa2に移るみたいにするのはどうすればいいでしょうか？
ソースコードを省いているところがあるので、場合によっては載せようと思います。

該当のソースコード

$(function(){
var buttons = document.getElementsByTagName('button');
for ( var i = 0; i < buttons.length; i ++ ) {
buttons[i].onclick = function() {
var keyword = document.getElementById('a1');
if ( keyword.value.length > 0 ) {
keyword.value += '';
}
keyword.value += this.value;
}
}
});

該当のソースコード

<input name="guess" class="formtext"  id="a1" accesskey="I" style="border-radius:5px;font-size: 150%; 
cursor: auto; background-color: rgb(204, 204, 255);" maxlengh="4" rows="4" 
cols="45" wrap="hard" autocomplete="off" placeholder="4文字入力"required>

<input name="guess2" class="formtext" id="a2" accesskey="I" style="border-radius:5px;font-size: 150%; 
cursor: auto; background-color: rgb(204, 204, 255);" maxlengh="4" rows="4"
 cols="45" wrap="hard" autocomplete="off" placeholder="4文字入力"required>

試したこと

同じscriptをa2に変えてもう一つ入れてみたのですが、その場合a2にのみ入力されるようになってしまいます。ボタンにフォーカスされてしまうからだと思うのですが・・

Answer 1

if ( keyword.value.length > 4 ) keyword = document.getElementById('a2');

こんなのを間に入れてみるとか

Comments

[paruru]

上手くいきました。大変ありがとうございました。