JavaScript を使用したプラグインなしの入力テキスト マスキング
- JavaScript でのクレジット カード番号の入力マスキング
- JavaScript での郵便番号入力マスキング
- JavaScript での括弧付きの電話番号の入力マスキング
- JavaScript のさまざまなフィールドの入力マスキングをカスタマイズする
JavaScript 入力マスクまたはマスクされたテキスト ボックスは、ユーザーが標準マスクに基づいて入力を収集するための簡単で信頼性の高い方法を提供するコントロールです。 たとえば、電話番号、日付の値、クレジット カード番号、およびその他の標準形式の値を取得できます。
特定のシナリオでは、ユーザーが特定のデータのみを特定の形式で入力できるようにする必要がある場合があります。 たとえば、郵便番号とクレジット カードのエントリは、特定のデータ形式を制限できる特定のパターン内にあります。
入力マスキング ライブラリを使用すると、ユーザーは特定のデータ入力形式を使用して入力フィールドをマスクできます。
入力フィールドをマスキングするためのこの JavaScript モジュールは、スペース、ダッシュ、およびその他の文字のエントリを自動的に作成します。 その結果、ユーザーは数字やアルファベットの入力だけに集中できます。
これは、Web インターフェイスを使用するデータ入力オペレーターが多くの入力を行う必要がある場合に特に役立ちます。
以下に示す例を参照することで、このライブラリを Web ページに設定する方法を学習できます。
JavaScript でのクレジット カード番号の入力マスキング
この例では、クレジット カードの一般的な形式が示されています。 ユーザーは、スペースを入力せずに数字とアルファベットを入力しようとすることができます。
以下のスクリーンショットに示すように、スペースが自動的に追加されていることがわかります。
以下のこの例のコードにアクセスできます。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="cc">Credit Card Number</label>
<input id="cc" type="tel" name="ccnum" placeholder ="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="Enter the 16 digits of credit card">
</li>
</ul>
<script src="js/maskinginput/maskinginput.js" data-autoinit="true"></script>
</body>
</html>
JavaScript での郵便番号入力マスキング
郵便番号は英数字が混在しているため、これは入力マスキングの興味深いケースです。 郵便番号を入力するためのプレースホルダーは、文字が必要か数字が必要かをユーザーが認識できるように作成されています。
以下のスクリーンショットを参照してください。
プレースホルダーで X を使用するのではなく、A1B2C3 が使用されていることがわかったので、必要な形式がわかります。 スペースに入る必要もありません。 正しい形式でコードを入力し続けてください。
郵便番号入力マスク フィールドを作成するためのマークアップを以下に示します。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="zipca">Enter zip code</label>
<input id="zipca" type="text" name="zipcode" placeholder="A1B2C3" pattern="\w\d\w\d\w\d" class="masked" datacharset="_X_ X_X" title="Enter zip code">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
JavaScript での括弧付きの電話番号の入力マスキング
この例では、電話番号フィールドがマスクされ、スクリプトが括弧を管理します。 これは、以下のスクリーンショットに示されています。
このためのコードを以下に示します。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="tel">Enter Phone</label>
<input id="tel" type="tel" name="phone number" placeholder="(XXX) XXX-XXXX" pattern="\(\d{3}\) \d{3}\-\d{4}" class="masked" title="Enter number without parenthesis">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
JavaScript のさまざまなフィールドの入力マスキングをカスタマイズする
上記のすべての例で注目すべき最も重要なことは、パターン定義です。 たとえば、上記の電話の例では、次のパターンが入力フィールドに配置されます。
pattern = '\(\d{3}\) \d{3}\-\d{4}'
ユーザーが括弧内に 3 桁ではなく 4 桁を入力できるようにする場合は、4 に変更します。入力フィールドをカスタマイズする方法を示すために、別のダッシュも追加します。パターンは次のようになります。
pattern = '\(\d{4}\) \d{3}\--\d{4}'
ユーザーは、次のようにプレースホルダーも変更する必要があります。
placeholder = '(XXXX) XXX--XXXX'
このスクリーンショットを以下に示します。
このためのコードを以下に示します。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="tel">Enter Phone</label>
<input id="tel" type="tel" name="phone number" placeholder="(XXXX) XXX--XXXX" pattern="\(\d{4}\) \d{3}\--\d{4}" class="masked" title="Enter number without parenthesis">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
同様に、ユーザーは必要な形式で数字または文字を追加することによって変更を行うこともできます。