基本を超えて: `` を使用してプロのように数値入力を処理する

とは何ですか?

MDN ドキュメントの定義によると: タイプ数値の要素は、ユーザーが数値を入力できるようにするために使用されます。これらには、数値以外のエントリを拒否するための組み込み検証が含まれています。

つまり、基本的には、つまらない Web サイトや Web アプリのユーザー エクスペリエンスを向上させるための機能です。これは数値入力を簡略化するための優れた機能ですが、最初は明らかではないかもしれませんが、Web 開発者として認識しておく必要がある動作がいくつかあります。

これらの動作は以下に関連しています:

1. 仮想キーボード
2. 科学的記法

仮想キーボード

仮想キーボードは、通常、携帯電話、タブレット/iPad、一部の支援技術などのタッチ入力デバイスの画面に表示されるキーボードです。

<input id="numeric-input" type="number" >

type="number" を使用するだけで最初は問題ないように思えますが、仮想キーボードを使用する場合には問題があります。数字キーボードではなくフルキー キーボードが開く可能性があり、ユーザー エクスペリエンスと入力精度が損なわれる可能性があります。

`" />

ソリューション入力モード

仮想キーボードの問題は、新しい OS やブラウザのバージョンでは発生しない可能性がありますが、要素またはその要素の編集中にユーザーが入力する可能性のあるデータの種類を示すため、inputmode 属性を使用することをお勧めします。コンテンツ。
これにより、ブラウザーはすべてのバージョンとデバイスに適切な仮想キーボードを表示できるようになり、アプリケーションの全体的なユーザー エクスペリエンス (UX) が向上します。

inputmode には多くの値を指定できますが、数値入力を使用するユースケースでは、次の 2 つの値のいずれかを使用する必要があります。
1.数値

<input id="numeric-input" type="number" inputmode="numeric" >

入力タイプの数値は、任意の有理数値を受け入れます。小数値を受け入れず、整数のみを受け入れる場合、そのようなシナリオでは数値の使用を優先する必要があります。

2.10 進数

<input id="numeric-input" type="number" inputmode="decimal" >

小数を受け入れる場合は、ユーザーのロケールの数字と小数点区切り文字を含む仮想キーボードが表示されるため、10 進数値を使用してください。

小数値を受け入れない場合を除き、入力では常に 10 進数値を使用することを好みます。

`" />

科学表記法

私たちの多くは、e または E が科学表記法で有効な数値であることを忘れているか、知らないかもしれません。

`" />

はい、e または E は科学表記法の 「10 の指数」 を意味し、非常に大きい値または小さい値を表すために使用されます。例:

1e5 = 100000 
     or 
1e-5 = 0.00001

HTML 入力タイプの数値は柔軟性を念頭に置いて設計されており、この科学表記法をサポートしており、指数の入力が可能です (例: 1e5)。これ自体は問題ではなく、状況によっては便利ですが、入力が基本的な数値のみで構成されている必要がある場合には問題になる可能性があります。

入力を数値のみに制限し、科学表記法を許可しないようにするには 2 つの方法があります。

1. 正規表現を使用しますか?パターン。
2. JavaScript を使用します (私の推奨方法)。

Javascript を使用したデフォルトの動作の防止

ほとんどのシナリオでは、「e」または「E」表記は不要であり、許可すると予期せぬ問題が発生する可能性があるため、ユーザーには入力させたくありません。

これを実現する方法はたくさんありますが、私のお気に入りの方法は、「e」または「E」キーが登録されないようにすることです。これは、keydown イベントとPreventDefault を使用して実現できます。

 element.addEventListener("keydown", (e) => {
    if (["e", "E"].includes(e.key)) {
      // you can also add "+" and "-" if you want to prevent them from being registered.
      e.preventDefault();
    }
  });

私がこの方法を特に気に入っているのは、次の 3 つの理由からです。

• 後でコードを読む人に、e または E キーを登録したくないという明確なメッセージを提供します。
• 値を変更する代わりにキー自体を登録しないため、UX も向上します。
• keydown イベントのタイプは KeyboardEvent で、これによりキー値に直接アクセスでき、ソリューション全体の DX が向上します。

すべての数値入力が入力タイプ番号である必要はない

数値入力を受け入れる入力要件を見た場合、本能的に入力タイプ番号に手が伸びることがありますが、そのようなシナリオでは入力タイプ番号が適切なソリューションではない場合もあります。

そのようなシナリオの例をいくつか示します。

• クレジット カード/デビット カード: クレジット カード/デビット カードの入力フィールドがある場合、入力タイプ番号を使用する代わりに、入力モードが数値および入力タイプのテキストを使用することをお勧めします。クレジット カードには先頭にゼロの値を含めることができ、ブラウザによってはそれが許可されない場合があるため、お好みの方法で検証してください。また、カード固有の検証を追加したり、(カードに印刷されているように) 4 つの数字のグループ間にスペースを入れたりすることもできます。 ）。

• 郵便番号: ほとんどの国には数字の郵便番号がありますが、カナダなど一部の国では英数字のコードが使用される場合があります。必要に応じてソリューションを使用することが重要です。入力タイプは数字である可能性があります。またはテキストを入力します。

• 携帯電話番号: ユースケースに適した正規表現パターンを持つ input="tel" の入力タイプを常に使用する必要があります。

結論

最新の HTML は非常に優れたユーティリティを提供しているため、入力タイプ番号などの実装は非常に簡単に思えるかもしれませんが、開発者として、これらのユーティリティと、それらをどのように利用してさらに優れたユーザー エクスペリエンスを作成できるかに常に注意を払う必要があります。

この記事が気に入った場合は、反応を残してください。何か気に入らなかった場合は、コメントにフィードバックを残してください。

私はテクノロジーやそれにまつわる出来事について人々とつながり、話すことが好きです。 Twitter/X および LinkedIn で私とつながることができます。

Dev.to で私をフォローして、新しい記事を公開するたびに通知を受け取ることもできます。

以上が基本を超えて: `` を使用してプロのように数値入力を処理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。