4年以上前の質問ですが、いまだとinputmode
属性がこの用途には使用できそうです。HTML5.1あたりから追加され、現在のHTML Standardに定義されています。
一方でtype="number"
は数文字列ではなく数値用なのでこのような用途にはあまり向かないかとおもわれます。(現実的には無効化していて問題ないかもしれませんが)たとえば「0123」を入力して上下ボタンを操作してしまうと「124」になったりします。
さておき、inputmode
属性はこんにちのモダンモバイルブラウザではFirefox以外では利用できるようです。数字を入力するためのものにはPINなどの数字用のnumeric
、小数を入力可能なdecimal
が定義されています。今回必要なのは前者でしょう。(手元の環境ではいずれも同じキーボードが表示されましたが。)
さて、MDNのサンプルではinput[password][inputmode="number"]
が利用されているのですが、実際に手元のAndroid Chrome(v78)でこれをためしてみたところ、キーボードには作用しませんでした。type=password
ではパスワード用のキーボードが優先されるようです。
ここで、type="text"
にしつつ既出の回答にある-webkit-text-security
をあわせて使うことで「いい感じ」のPINフォームができます。
(なお、なにもしていない状態のtype=textなinputフィールドなので物理キーボード+IMEな環境ではマスクされながらも日本語文字列の入力が可能です。そこらへんはよしなにする必要があります。)
form {
margin: 20px;
border: 1px solid #aaa;
border-radius: 5px;
padding: 20px;
}
<h2>Text</h2>
<form>
<label>numeric: <input type="text" inputmode="numeric" style="-webkit-text-security: disc"></label>
</form>
<form>
<label>decimal: <input type="text" inputmode="decimal" style="-webkit-text-security: disc"></label>
</form>
<h2>Password</h2>
<form>
<label>numeric: <input type="password" inputmode="numeric"></label>
</form>
<form>
<label>decimal: <input type="password" inputmode="decimal"></label>
</form>