input输入框输入身份证号码，自动填充年月日

王小婷

发布于 2023-09-19 10:46:01

2680

发布于 2023-09-19 10:46:01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    </head>
    <body>
        <input type="text" placeholder="请输入身份证号" id="idCard">
    
        <input type="text" placeholder="请输入年" id="year">
        <input type="text" placeholder="请输入月" id="month">
        <input type="text" placeholder="请输入日" id="day">
        <script>
            $(document).ready(function() {
                // 获取身份证号码输入框和三个 select 元素
                const idCardInput = $('#idCard');
                const yearSelect = $('#year');
                const monthSelect = $('#month');
                const daySelect = $('#day');

                // 监听身份证号码输入框的输入事件
                idCardInput.on('input', function() {
                    const idCardNumber = idCardInput.val();

                    // 提取身份证中的年、月、日
                    const year = idCardNumber.substr(6, 4);
                    let month = idCardNumber.substr(10, 2);
                    let day = idCardNumber.substr(12, 2);

                    // 去除月份和日期前的零
                    if (month.startsWith('0')) {
                        month = month.substr(1);
                    }
                    if (day.startsWith('0')) {
                        day = day.substr(1);
                    }

                    // 将提取的值赋值给对应的 select 元素
                    yearSelect.val(year);
                    monthSelect.val(month);
                    daySelect.val(day);
                });
            });
        </script>
    </body>
</html>

通过$('#id')方式获取身份证号码输入框和三个select元素（年、月、日）。使用on('input', function() { ... })来监听身份证号码输入框的输入事件。

当用户输入身份证号码时，代码会提取身份证号码中的年、月、日部分，并将其赋值给对应的select元素。

在提取月份和日期时，代码还会去除前面可能存在的零。通过val()方法将提取的值赋给对应的select元素，实现选中对应的选项。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

input