私は携帯電話のブラウザに表示するためのテンキーパッドが必要なフィールドはほとんどありません。 maxlengthと一緒にモバイルブラウザでテンキーのみのキーパッドを表示する方法とキーパッドの特殊文字を許可しない方法はありますか？
<input type="tel">
<input type="number">は、キーパッドを示したが、何のMAXLENGTHのサポートはありません。フィールドの1つは年齢です。だから、幅は非常に小さいです。
maxlengthがサポートされていないため：ユーザーが入力する文字数が多すぎると、検証が実行されますが、入力サイズが小さいため、大きな数値を消去するのが面倒になります。
max-lengthの代わりに使用できるpattern属性があります。したがって、フォームは即座にパターンを検証し、満たされていない場合はエラーにフラグを立てます。例えば、
<input type="tel" pattern="^\d{1,4}$">
これは4より小さい（1と4の間の）長さの数だけを受け入れます。長さが超過した場合、またはユーザーが#のような無効な文字を入力した場合にフラグを立てます。
私はFirefoxとその動作についてテストしました。
最後に<input type="tel">を使用して解決策を得ました。電話キーパッドの特殊文字は、をキーコードとして返します。整数に値を解析すると、NaNが返されます。これにより、入力された文字を検証するのに役立ちます。
AndroidのChromeに特有の問題の1つは、キーイベントを取得しないことです。特殊文字を入力できるようになりますが、後で検証されます。他のブラウザでは、特殊文字をまったく入力できません。
maxおよびmin属性を持つ入力type='number'を使用できます。
<input type="number" id="age" min="0" max="999" />
また、イベントKeyPressでJavascriptを使用することをお勧めします。ユーザーは「99999」とは、例えばコピーしCtrl + Vを押すと
<input type="number" id="age" min="0" max="999" onkeypress="validateLength()"/>
<!-- language: lang-js -->
const limitAgeSize = 3;
const $inputAge = document.getElementById("age");
function validateLength() {
if ($inputAge.value.length >= limitAgeSize) {
$inputAge.value = $inputAge.value.slice(0, -1);
}
}
問題があり、機能validateLength()は、最後の文字を削除します。さらに削除するには、whileループを書くことができます。
**単にテキストフィールドタイプ番号を定義し、設定最大lengt 3 **
<EditText
android:id="@+id/spdtxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="number"
android:maxLength="3"
android:textAlignment="center"
tools:text="80" />
大丈夫答えますか？私が忘れた何かをお探しですか？ – TheChetan
私の悪い。私は使用されないブラウザの検証については言及しなかった。私たちは、ブラウザ間で常にフィールドの下に小さなエラーメッセージを表示する必要があります。 （ブラウザの検証UIは一貫していません）ソリューションbtwが見つかりました。 – Neeraj