HTML5 の数値入力コードで整数値のみを受け付けるようにする

この2年間、これに関する記事や投稿をたくさん見てきましたが、本当にとても便利なものです。しかし、まだ穴のある実装、不自由な実装などが多すぎます。

全体的なコンセプトは理にかなっています。HTML 5の属性を使ってサーバーに送信できるものを制限し、Javascriptを使ってそれを強化し、ユーザーがそもそも入力できるものを制限するのです。

では、これらの問題点を踏まえて、より良い実装をしていきましょう。

問題点1、スクリプトが悪い

最も一般的な欠陥は、適切なダウングレード機能がないことです。electron」や「nw.js」でフルスタックアプリケーションを構築したいのであれば構いませんが、このような形態は通常、一般公開されるウェブサイトにはふさわしくありません。

私がいつも言っているように、質の高いスクリプトは、すでに動いているページを強化するものであって、ユーザーがそれを使うための唯一の方法ではないのです。

解決策は？

pattern属性とstep属性を使って、有効なコンテンツを限定する。

問題2、正規表現パターンが正しくない、または不完全である

最もよく使われるパターンは [-/ d] * で、これはあらゆる場所でマイナス記号を許容してしまうという問題があります。確かにtype = "number "で問題を解決することは可能ですが、これは良い選択ではありません。特にキーストロークを傍受する場合、マイナス記号は最初の文字にしかならないので、これは顕著です。

また、正規表現「ではない」実装があるため、誤検出の原因になることも問題です。

回避策は？

HTMLの場合は、より良い表現を使用した方がより堅牢で正確です。を使用する方がより堅牢で正確です。マイナス記号は、マッチの最初の文字で、その後、文字列の終わりまで小数点以下がゼロになるようにすることができます。

JavaScriptの場合、数値のテストには正規表現のみを使用し、その他の値の検出にはより実用的なロジックを適用します。

楽勝

質問3、マークアップでのイベント属性の使用について

JSXのゴミでこれを奨励している口だけ野郎が大量にいるのは知っているが、バニラとか他のシステムを書いている人は、クリスマスの愛のために、1997年の直腸から頭を出してください。

マークアップに "onkeypress" や "onchange" を入れることは、キャッシュの機会を逃し、関心事分離の原則に違反することを意味します。このようにマークアップにJavaScriptを入れることは、HTML 4 Strictで非推奨とされたすべてのものと同じくらい、とんでもなく愚かなことです。text-white box-shadow col-4-s」のような属性でHTMLを小馬鹿にするなら、負けを認めて、FONT / CENTERタグ、COLOR、BGCOLOR、SIZE、BORDER、ALIGN属性、そして皆さんが明らかにそして心から懐かしそうに書いている「レイアウト用のテーブル」のあるHTML 3.2の記述に戻ってほしいようなものです。

これは、イベントハンドラへの完全な/適切なアクセス権がないことも意味します。

解決策は？

Element.addEventListener、ぜひ使ってみてください。

課題4、各入力はハードコードする必要がある

問題3によってイベントのプロパティをタグに入れるにせよ、ユニークなIDを手動で取得することによってイベントを捕捉するにせよ、プラグアンドプレイのタグ付けアプリケーションで実際に動作するコードベースはほとんど見当たりませんね。

解決策は？

document.querySelectorAll('input[type="number"][step="1"]') は欲しい整数の入力をすべて与えてくれるので、それを強化することができるのです。

問題5、一部のスクリプトでナビゲーションコントロールや通常の編集が使えない!

マイナスや0...9だけをインターセプトして許可することで、バックスペース、エンター、タブ、矢印、削除、挿入などを防いでいるのです。どのようなイベントをフックするかによって、すべてのブラウザがこれらをevent.keyとして送信するわけではありません。例えば、"keypress" イベントは、Firefox と Chrome では通常のフォームの使い方を壊さないようにフィルタリングされますが、"old Edge" と Safari ではフィルタリングされず、" keydown" でも何もフィルタリングされません。

解決策は？

keypress」イベントはブラウザ間で一貫性がないため、keydownに置き換えます。そうすれば、すべてのコントロールキーがEvent.keyの値で複数の文字を返すことを利用し、Event.key.length>1をチェックして「これらを許可し続ける」とすればいいのです。

前述したように、そもそもJavaScriptを使わなくても、できるだけ多くの機能を持ったシンプルな入力があればいいのだ！ということです。

HTMLです。

<input type="number" step="1" pattern="^[-/d]/d*$" />

整数のみ受け付けます。正の数のみ受け付けたい場合は、pattern="/d+" に変更します。

JavaScriptを使用しています。

そして、JavaScriptを使ってユーザーの入力を制限し、無効な値の入力すら許されないようにすることができる。

(function() {
  var integers = document.querySelectorAll(
      'input[type="number"][step="1"]'
    ),
    intRx = /\d/;

  for (var input of integers) {
    input.addEventListener("keydown", integerChange, false);
  }

  function integerChange(event) {
    if (
      event.key.length > 1 ||
      (event.key === "-" &&
        event.currentTarget.value.length === 0) ||
      intRx.test(event.key)
    )
      return;
    event.preventDefault();
  }
})();

まず、IIFEで包んでスコープを切り分けます。次に、ページ上でフックしたいすべての入力を取得し、正規表現を作成します。

イベントの中ではなく、イベントの最初に正規表現を作成することで、キーストロークのたびに正規表現を作成する時間を無駄にしないようにしています。このように、無名関数はオーバーヘッドとなりうるものであり、「関数型プログラマー」とその「副作用」のたわごとを伝える必要があるのです。

すべての入力をループし、それらにイベントハンドラを割り当てる。

上記のハンドラは、何を返しているかをチェックするだけです。矢印、バックスペース、エンターキーなどのコントロールキーは、それらを説明するフルテキストを返すので、event.keyの長さが1以上であれば、これらをブロックしないようにします。

マイナス記号と1文字目であればreturnで許可する。

数字であれば、リターンで許可する。

どちらでもない場合、イベントをブロックします。

ライブデモ

これは、複数のテキストフィールドと複数の整数および非整数の数値フィールドを含むコードブックで、本当に必要なフィールドにのみフックしていることがわかります。

https://codepen.io/jason-knight/pen

未解決の問題

しかし、「pattern」プロパティは無効な値の送信を許可しないので、それは問題ではないでしょう。

結論

ユーザーが間違って入力する可能性のある項目とその対処法についてもっと考えるだけでなく、ユーザーが入力する可能性のある、値そのものとは関係のない他のすべての項目についても心に留めておいてください。

多くのユーザーは、セキュリティやアクセシビリティの理由から、積極的にスクリプトを書かないようにしたり、UAで利用できないようにしたりすることを常に意識してください。基本的な機能を置き換えるのではなく、強化しましょう

最初から一つの要素だけを使うのではなく、これらのフィールド全てにこれらのことを適用するように計画してください。

コールバックとして使用される匿名関数......を複数回生成する方法や、マークアップにスクリプトを入れることでページや再訪問に渡るキャッシュの機会を逃す方法など、非効率的な方法に注意しましょう。

これらのことができれば、このような単純な機能の実装で悩んだり、ユーザーを困らせたりすることはなくなります。

HTML5の数値入力は整数コードしか受け付けないという記事はこれだけです、もっと関連するHTML5の数値入力整数コンテンツはBinaryDevelopの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください、今後ともBinaryDevelopをよろしくお願いします。