5

携帯対応のサイトを作成しています。

<input type="password"> にフォーカスしたときに Android の入力モードを数字キーボードに切り替える方法はありますか?

ガラケー (istyle, format, mode) および iPhone (pattern="\d*") については数字入力に切り替えられるのですが、Androidだけが数字入力に切り替える方法がわかりません。

Android については他の数字入力欄は <input type="text"><input type="number"> のように変更して数字入力ができるようにしているのですが、パスワード入力欄に関しては type="number" を指定するとマスキングがなくなってしまう等、都合が悪いです。

別の方法で工夫できないかと考えています。

2 件の回答 2

8

以下のように type 属性でテンキーが出るようにし style-webkit-text-security: disc でマスキングするようにできるようです。

<input type="number" style="-webkit-text-security: disc;">

手元にAndroid端末がないため、Android上での確認はできておりません。

参考:

0
3

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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。