参考にさせていただいたページ
- HTML5で追加された input[type=number] を使う上での注意 - Qiita
- Reconsider the behaviour for type="number" - restricting input · Issue #1355 · w3c/html · GitHub
- スマートフォンで数字キーボードに変更する（2015/01版) - Qiita
はじめに
という要望があり、2020年7月20日現在の挙動をあらためて確認しました。
type="number"にすると
2020年7月20日現在の挙動として、keydownイベントでざっと確認したところ以下の通りでした。
- MacのChromeで全角数字を入力して、確定したときに入力値が削除されました。このときevent.targer.valueには何もわたされません。
- MacのFirefoxで全角数字を入力して、確定したときに見た目上は全角数字が入力できました。このときevent.targer.valueにはには半角数字が渡されます。
- MacのFirefoxで半角数字012などを入力したときに0が削除されて12に変換されました。このときもevent.target.valueの型はstringです。
type="tel"にすると
- iOSで表示されるキーボードにハイフンが無い
inputmode属性
試していませんが、特に解決はしなさそうな気がします。
結局どうしているか
参考までに結局のところどのような実装をしているかというと、
- type="tel" でiOSとAndroidのキーボードを数字にする（ハイフンなし）
- event.target.valueに全角数字が渡されたら半角にし、数字以外の文字は削除してフィールドバリューに入れ直す
みたいなことをしています。
