2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[HTMLのみ]ブラウザのformで次の入力欄にカーソル移動させる

Posted at

Androidで入力欄が連続していると面倒臭い

Screenshot_20200102_104447_com.android.chrome.jpg

会員登録のときとか、formに次々と情報を入れなければならないとき、Androidにもタブキーが欲しいと思うほど入力欄の移動が面倒臭い。

でもなんだか確定キー(Enterキー)の表示が変わってて、欄を移動できるときがある。
どうもIMEの違いではなさそうだ。GbordでもATOKでもShimejiでも移動できる。
ブラウザの違いでもない。ChromeでもFirefoxでもYahooブラウザでも移動できる。
ソースを開いてみるとjavascriptは埋め込まれてない。

…どういうことなの。

普通はカーソル移動できない

See the Pen カーソル移動しないform by tomoyatakagawa (@tomoyatakagawa) on CodePen.

buttonのtypeがsubmitかbuttonかの違いか?
そういうわけでもないみたい…

カーソル移動した

See the Pen カーソル移動するform by tomoyatakagawa (@tomoyatakagawa) on CodePen.

2つ目の試行でカーソルが移動した。
なんと<input>群を<form>で囲んだだけ!
HTML5から<input>を<form>に入れなくても良くなったけど、ちゃんと入れればそれなりの動作をしてくれるものなんですね。

対応ブラウザ

全てはちゃんと調べていないのですが、2020年1月現在の最新ブラウザなら動くと思います。
(2016年のChromeでは動きませんでした)

ちなみに背景として

会社で脱・紙記録をしようとしているんですが、使っている記録用紙の記入欄の数が半端なくて、デジタル化したところでめちゃめちゃ入力しづらかったんです。せめてカーソルが自動移動すればなと思ったんですが、既製品のシステムなのでjavascript入れると他の機能と衝突しそうで、簡単な方法が無いか探していました。

なので一般の方が使うWebサイトでなく、社内で使うシステムで使用ブラウザを指定できる場合などに使える方法だと思います。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?