28

HTML5 には何らかのテキスト フィールド マスキングがありますか、それともトラップする必要がありますonkeydownか?

jbabey は正しいです。タイプされたものを隠すのではなく、特定の不正な文字をブロックするように「マスキング」します。

私が見つけた最良の (最も単純で最も信頼できる) 方法は、トラップonkeyupしてから、テキストフィールドの値に対して正規表現置換を実行し、不正な文字を削除することです。

これにはいくつかの利点があります。

  1. 実装は簡単です (1 つの関数、2 行のコード)。
  2. 信頼性が高く、私が考えたすべてのケースをカバーしています。
  3. コピー/貼り付け、すべて選択、矢印キーなどのキー コマンドはブロックされません。

しかし、その主な欠点は、タイプされた文字を削除する前に簡単に表示することです。

4

5 に答える 5

14

新しいHTML5 入力タイプを参照してください。これらはブラウザにデータのクライアント側フィルタリングを実行するように指示しますが、実装は異なるブラウザ間で不完全です。このpattern属性は正規表現スタイルのフィルタリングを行いますが、ブラウザはそれを完全に (またはまったく) サポートしていません。

ただし、これらは入力自体をブロックするものではなく、無効なデータを含むフォームの送信を防ぐだけです。onkeydown画面に表示する前に、キー入力をブロックするためにイベントをトラップする必要があります。

于 2012-06-04T20:21:19.853 に答える
8

  1. 基本的な検証は、input 要素のtype 属性を選択することで実行できます。例えば： <input type="email" /> <input type="URL" /> <input type="number" />

  2. 次のようなパターン属性 を使用します。<input type="text" pattern="[1-4]{5}" />

  3. 必須属性 <input type="text" required />

  4. 最大長: <input type="text" maxlength="20" />

  5. 最小 & 最大: <input type="number" min="1" max="4" />

于 2014-03-16T13:19:42.077 に答える
6

はい、HTML5 ドラフトによると、pattern属性を使用して、正規表現を使用して許可された入力を指定できます。データの種類によっては、 のような特別な入力フィールドを使用できます<input type=email>。しかし、これらの機能は依然として広くサポートされていないか、質的にサポートが不十分です。

于 2012-06-04T20:19:25.477 に答える
4

少し遅れていますが、実際にマスクを使用してユーザー入力をもう少し制限する便利なプラグインです。

<div class="col-sm-3 col-md-6 col-lg-4">
  <div class="form-group">
     <label for="addPhone">Phone Number *</label>
      <input id="addPhone" name="addPhone" type="text" class="form-control 
       required" data-mask="(999) 999-9999"placeholder>
    <span class="help-block">(999) 999-9999</span>
  </div>
</div>

 <!-- Input Mask -->
 <script src="js/plugins/jasny/jasny-bootstrap.min.js"></script>

ここに画像の説明を入力

プラグインの詳細https://www.jasny.net/bootstrap/2.3.1/javascript.html#inputmask

于 2018-01-25T14:47:16.873 に答える