複数の入力があるとき、Enterで次の項目に行くようにしたい

Question

題名通りです。
inputが複数あるのですが、　
1つ目に解答→いったん画面の別の所をタップして入力モード解除→2つ目の空欄をタップして入力
というような手順を踏まなければならず、めんどくさいです。

<input type="text" style="width:80%;height:10%;font-size:1em;"  placeholder="名前">
<input type="number" style="width:80%;height:10%;font-size:1.5em;" placeholder="番号" >
<input type="button">

初めに名前を入力後、Enterを押すと番号の所にカーソルが動き、
番号を入力後、Enterを押すと、ボタンクリックのイベントが起こる　というようなことをしたいです。

Answer 1

こんにちは。

以下のような感じでいかがでしょうか。

https://jsfiddle.net/jun68ykt/436jfdp8/1/

ポイントは

• 何らかのキーが押されたことは、keypress イベントで拾う。
• Enterが押されたことは、イベントオブジェクトのkeyCode で判定

なお、

タップして

と書いてあるので、スマホか何かで実現したいものと思いますが、
上記のコードは、PC以外のデバイスでは試していないです。

以上参考になれば幸いです。