jQuery Mask手机输入掩码|极客教程

jQuery Mask手机输入掩码

1. 介绍

在手机输入框中，我们经常会对用户输入的内容进行限制和格式化，如手机号码、身份证号码等。而jQuery Mask是一个让我们能够方便地对输入框进行掩码处理的插件。本文将详细介绍jQuery Mask的使用方法，并通过示例代码演示其使用效果。

2. 安装jQuery Mask

要使用jQuery Mask，首先需要引入jQuery库文件和jQuery Mask插件文件。可以通过以下方式进行引入：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Mask示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.mask/1.14.18/jquery.mask.min.js"></script>
</head>
<body>
    <!-- 输入框 -->
    <input type="text" id="phoneInput" placeholder="请输入手机号码">
    <script>
        // 在这里编写jQuery Mask的使用代码
    </script>
</body>
</html>

3. 使用jQuery Mask

3.1 基本使用方法

基本的jQuery Mask使用方法是通过调用mask()方法对输入框进行掩码处理。例如，要对手机号码进行掩码处理，可以使用如下代码：

$(document).ready(function() {
    $('#phoneInput').mask('9999-9999-9999'); 
});

上述代码中，9999-9999-9999是手机号码的掩码格式，mask()方法会自动将输入框中的内容按照该格式进行掩码显示。用户在输入时，会自动根据格式进行空格和分隔。

3.2 控制占位符符号

在输入框中的掩码处理中，经常出现占位符号，例如前面的手机号码掩码格式使用的是9999-9999-9999。但有时我们希望使用其他占位符号，例如####-####-####。我们可以通过在掩码格式中使用#来表示可以输入的位置：

$(document).ready(function() {
    $('#phoneInput').mask('####-####-####'); 
});

上述代码中，我们将掩码格式更改为####-####-####，表示手机号码的每一位可以输入的位置。用户在输入时，#位置会自动占位，方便用户查看。

3.3 动态掩码格式

有时我们需要根据特定的条件，动态地改变输入框的掩码格式。我们可以通过编写一段JavaScript代码，根据条件来选择不同的掩码格式。例如，根据用户选择的国家地区，决定手机号码的输入掩码格式：

$(document).ready(function() {
    $('#countrySelect').change(function() {
        var countryCode = $(this).val();
        if (countryCode === '1') { // 美国
            $('#phoneInput').mask('(000) 0000-0000');
        } else if (countryCode === '86') { // 中国
            $('#phoneInput').mask('9999-9999-9999');
        } else { // 其他
            $('#phoneInput').mask('####-####-####');
        }    
    });
});

上述代码中，#countrySelect是一个下拉框，当用户选择不同的国家地区时，会触发change事件，根据选择的国家地区编写特定的掩码格式。

4. 示例代码演示

下面我们通过一些示例代码演示jQuery Mask的使用效果。

4.1 示例1：手机号码掩码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>手机号码掩码示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.mask/1.14.18/jquery.mask.min.js"></script>
</head>
<body>
    <!-- 手机号码输入框 -->
    <label for="phoneInput">手机号码：</label>
    <input type="text" id="phoneInput" placeholder="请输入手机号码">

    <script>
         $(document).ready(function() {$ ('#phoneInput').mask('9999-9999-9999');
        });
    </script>
</body>
</html>

效果如下：

用户输入：13812345678

掩码显示：1381-2345-6789

4.2 示例2：身份证号码掩码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>身份证号码掩码示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.mask/1.14.18/jquery.mask.min.js"></script>
</head>
<body>
    <!-- 身份证号码输入框 -->
    <label for="idNumberInput">身份证号码：</label>
    <input type="text" id="idNumberInput" placeholder="请输入身份证号码">

    <script>
         $(document).ready(function() {$ ('#idNumberInput').mask('999999-99999999-999A');
        });
    </script>
</body>
</html>

效果如下：

用户输入：440381-19900101-123X

掩码显示：440381-19900101-123X