jQuery Mask 插件

jQuery mask是一个jQuery插件，可以帮助在基本的HTML输入字段和其他元素上戴上一个面具。如果开发者希望输入框只接受某种格式的输入，那么他们可以使用jQuery mask插件来实现。这种类型的功能也可以用PHP等后端语言来创建。但是，如果在前端自己处理的话，会更节省时间和内存。

例如，假设开发者希望用户以(xxx)-xxx-xxxx的格式输入10位数的手机号码。他们可以使用jQuery Mask来指定这个格式，然后输入框就会自动按照定义的格式来输入数字。开发者所要做的就是使用jQuery的选择器$选择合适的输入框，然后使用mask()功能指定所需的格式。

遮罩转换。默认可用的遮罩转换是。

‘0’:{pattern:/\d/}
‘A’:{pattern:/[a-zA-Z0-9]/}。
‘9’:{pattern:/d/, optional: true}
‘S’:{pattern:/[a-zA-Z]/}。
‘#’:{pattern:/d/, 递归: true}。

CDN Link

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js" 
        integrity="sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA=" 
        crossorigin="anonymous"
</script>

这个链接必须包含在索引页中，以使jQuery面具的功能发挥作用。

示例:

<!Doctype html>
<html lang="en">
  
<head>
  
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,
                initial-scale=1,
                shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
      
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"
            integrity=
"sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA="
            crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous">
    </script>
      
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous">
    </script>
      
    <style>
        body {
            padding: 2%;
        }
    </style>
</head>
  
<body>
    <h2>jQuery Mask</h2>
    <br>
      
    <p>
        <label>
            Date Example
            <input type="text"
                name="date" />
        </label>
    </p>
  
    <p>
        <label>
            ZIP Code Example
            <input type="text"
                name="zip-code" />
        </label>
    </p>
  
    <p>
        <label>
            Mobile Number Example
            <input type="text"
                name="mobile-number" />
        </label>
    </p>
  
    <p>
        <label>
            Policy Number Example
            <input type="text"
                name="policy-number"
                data-mask="00-00-0000-0000" />
        </label>
    </p>
  
    <script>
         $('input[name="date"]').mask('0000/00/00');$ ('input[name="zip-code"]').mask('S0S 0S0');
         $('input[name="mobile-number"]').mask('(00) 0000 0000');$ ('input[name="postal-code"]').focusout(function() {
            $('input[name="postal-code"]').val(this.value.toUpperCase());
        });
    </script>
</body>
  
</html>

输出
jQuery Mask Plugin