欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用 JavaScript 在沒有插件的情況下輸入文本掩碼的示例詳解

 更新時(shí)間：2023年06月30日 11:50:47   作者：跡憶客  
這篇文章主要介紹了使用 JavaScript 在沒有插件的情況下輸入文本掩碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

JavaScript 輸入掩碼或掩碼文本框是一種控件，它為用戶提供了一種簡(jiǎn)單可靠的方式來收集基于標(biāo)準(zhǔn)掩碼的輸入。 例如，它允許您捕獲電話號(hào)碼、日期值、信用卡號(hào)和其他標(biāo)準(zhǔn)格式值。

在某些情況下，您可能需要允許用戶以特定格式僅輸入特定數(shù)據(jù)。 例如，郵政編碼和信用卡條目屬于特定模式，您可以在其中限制特定數(shù)據(jù)格式。

輸入屏蔽庫允許用戶使用特定的數(shù)據(jù)輸入格式屏蔽輸入字段。

這個(gè)用于屏蔽輸入字段的 JavaScript 模塊將自動(dòng)輸入空格、破折號(hào)和其他字符。 因此，用戶可以專注于輸入數(shù)字或字母。

當(dāng)需要使用 Web 界面的數(shù)據(jù)輸入操作員進(jìn)行許多輸入時(shí)，這尤其有用。

通過下面給出的示例，您將了解如何在您的網(wǎng)頁上設(shè)置此庫。

JavaScript 中信用卡號(hào)的輸入掩碼

在這個(gè)例子中，給出了信用卡的一般格式。 用戶可以嘗試在不輸入空格的情況下輸入數(shù)字和字母。

您會(huì)看到空格是自動(dòng)添加的，如下面的屏幕截圖所示。

信用卡號(hào)的輸入掩碼

您可以在下面訪問此示例的代碼。

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="css/masking-input/masking-input.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" />
  <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 中的郵政編碼輸入掩碼

郵政編碼是字母數(shù)字的混合，因此這是一個(gè)有趣的輸入屏蔽案例。 用于輸入郵政編碼的占位符是為了讓用戶知道是否需要字符或數(shù)字。

請(qǐng)參閱下面的屏幕截圖。

郵政編碼輸入掩碼

您沒有在占位符中使用 X，而是看到使用了 A1B2C3，因此您知道所需的格式。 你也不需要進(jìn)入空間； 繼續(xù)以正確的格式輸入代碼。

下面給出了用于創(chuàng)建郵政編碼輸入屏蔽字段的標(biāo)記。

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="css/masking-input/masking-input.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" />
  <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 中使用括號(hào)輸入掩碼的電話號(hào)碼

在此示例中，電話字段將被掩碼，腳本將管理括號(hào)。 這顯示在下面的屏幕截圖中。

帶括號(hào)的電話號(hào)碼

下面給出了此代碼。

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="css/masking-input/masking-input.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" />
  <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 中的不同字段自定義輸入掩碼

在上面的所有實(shí)例中要注意的最重要的事情是模式定義。 例如，以下模式被放置在上面電話示例中的輸入字段中。

pattern="\(\d{3}\) \d{3}\-\d{4}"

如果您想讓用戶在括號(hào)中輸入四位數(shù)字而不是 3，請(qǐng)將其更改為 4。為了顯示如何自定義輸入字段，您還將添加另一個(gè)破折號(hào)，因此模式看起來是這樣的：

pattern="\(\d{4}\) \d{3}\--\d{4}"

用戶還需要按如下方式在占位符中進(jìn)行更改。

placeholder&#61;&#34;(XXXX) XXX--XXXX&#34;

下面給出了此屏幕截圖。

自定義不同字段的輸入掩碼

下面給出了此代碼。

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="css/masking-input/masking-input.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" />
  <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>

同樣，用戶也可以通過添加所需格式的數(shù)字或字符來進(jìn)行更改。

到此這篇關(guān)于使用 JavaScript 在沒有插件的情況下輸入文本掩碼的文章就介紹到這了,更多相關(guān)js輸入文本掩碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論