web-dev-qa-db-ja.com

入力フィールドタイプを数値とパスワードの両方にする方法は？

私はこれを知っています：

<input type="tel">

そして私はこれを知っています：

<input type="password">

しかし、両方を使用したいと思います。数字キーパッドをiOS（具体的には）に表示し、入力後に各文字を非表示にしたい。このようなことは可能ですか？

<input type="tel|password">
htmlinputpasswordsnumeric
21
kaleazy

IOSの場合、入力を「パスワード」タイプに設定し、HTML5-Attribute「パターン」を使用して数値キーボードをトリガーできます。

<input type="password" pattern="[0-9]*" ... />

Apple-Documentation から：

数字キーボードを表示するには、pattern属性の値を "[0-9]"または "\ d"に設定します。

15
marco

入力ボックスのHTML：

<input type="tel" name="password" id="password" value="" placeholder="Enter password"
    onfocus="changeToPassword()">

JavaScript：

// change the type of the input to password
function changeToPassword() {
    setTimeout(function () {
        document.getElementById("password").setAttribute("type", "password")
    }, 500);
}

このソリューションはiPhoneで機能します。これは一種のハックです。次の500ミリ秒の間にテンキーを取得したら、属性をパスワードに変更すると、電話がだまされます。

8
Tono Nam

入力タイプをパスワードにし、javascriptを使用して、送信ボタンが押されたときに数字のみが入力されたことを検証できます。 http://www.configure-all.com/javascript_form_validation.php

1
Alex Datcu