web-dev-qa-db-ja.com

HTML（5）テキスト入力で文字をマスクする最も簡単な方法

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

jbabeyは正しいです。つまり、入力されたものを隠さずに、特定の違法文字をブロックするような「マスキング」です。

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

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

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

しかし、主な欠点は、入力した文字を削除する前に簡単に表示することです。これにより、非常にハック的で専門的ではないように見えます。

javascripthtmlhtml5masking
19
devios1

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

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

10
saluce

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

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

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

  4. maxlength：<input type="text" maxlength="20" />

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

7
user805125

はい、HTML5ドラフトに従って、pattern属性を使用して、正規表現を使用して許可された入力を指定できます。一部のタイプのデータでは、<input type=email>などの特別な入力フィールドを使用できます。しかし、これらの機能はまだ広くサポートされていないか、質的に不十分なサポートがあります。

6
Jukka K. Korpela

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

<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>

enter image description here

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

3
Stephen Romero