4881


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

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

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

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

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


CC BY-SA 3.0
2015-01-20T02:42:09.270
4877
2019-10-17T13:23:00.367
2015-01-20T03:03:37.420
4978
7573
question
android html html5 google-chrome
Android ブラウザで `<input type="password">` にフォーカスした時、数字入力モードとしたい


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

[code]

    <input type="number" style="-webkit-text-security: disc;">
[/code]

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

参考:

  * [CSS3 - スマホサイトのinputタグでキーボードにテンキーを指定しつつ入力を伏字にする](http://qiita.com/ooyabuh/items/96bc4e0c470be9bbfe56) - Qiita
  * <http://jsdo.it/blueberrystream/vB04> - jsdo.it（[Internet Archive](https://web.archive.org/web/20191017105926/http://jsdo.it/blueberrystream/vB04)）


CC BY-SA 4.0
2015-01-20T03:23:25.607
4881
2019-10-17T11:03:06.783
2019-10-17T11:03:06.783
19110
3160
4877
answer


4年以上前の質問ですが、いまだと[`inputmode`](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/inputmode)属性がこの用途には使用できそうです。HTML5.1あたりから追加され、[現在のHTML
Standardに定義](https://html.spec.whatwg.org/multipage/interaction.html#input-
modalities:-the-inputmode-attribute)されています。

一方で`type="number"`は **数文字列ではなく数値用**
なのでこのような用途にはあまり向かないかとおもわれます。(現実的には無効化していて問題ないかもしれませんが)たとえば「0123」を入力して上下ボタンを操作してしまうと「124」になったりします。

* * *

さておき、`inputmode`属性はこんにちのモダンモバイルブラウザでは[Firefox以外では利用できる](https://caniuse.com/#feat=input-
inputmode)ようです。数字を入力するためのものにはPINなどの数字用の`numeric`、小数を入力可能な`decimal`が定義されています。今回必要なのは前者でしょう。(手元の環境ではいずれも同じキーボードが表示されましたが。)

さて、[MDNのサンプル](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/password#Examples)では`input[password][inputmode="number"]`が利用されているのですが、実際に手元のAndroid
Chrome(v78)でこれをためしてみたところ、キーボードには作用しませんでした。`type=password`ではパスワード用のキーボードが優先されるようです。  
ここで、`type="text"`にしつつ既出の回答にある`-webkit-text-
security`をあわせて使うことで「いい感じ」のPINフォームができます。

(なお、なにもしていない状態のtype=textなinputフィールドなので物理キーボード+IMEな環境ではマスクされながらも日本語文字列の入力が可能です。そこらへんはよしなにする必要があります。)

[code]

    form {
      margin: 20px;
      border: 1px solid #aaa;
      border-radius: 5px;
      padding: 20px;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-10-17T13:23:00.367
59772
2019-10-17T13:23:00.367
2376
4877
answer