多个输入框的验证码

最新推荐文章于 2023-06-12 17:22:37 发布

weixin_30642029

最新推荐文章于 2023-06-12 17:22:37 发布

阅读量660

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zimengxiyu/p/11025562.html

本文介绍了一种方法，通过HTML、CSS和JavaScript实现数字输入框的字符限制和美观布局，确保输入的数字只显示在预设的五个方框内，并自动截断过长的数字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现方法：1.先写好5个框 2.input输入框定位到5个框上并把背景颜色设为透明（transparent），3.input输入框中内容加上字间距（letter-spacing）来调整让输入框中的字符刚好在5个框中间。

最终效果：

全部代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /*清除浏览器默认样式*/
            input[type=number] {
                -moz-appearance: textfield;
            }            
            input[type=number]::-webkit-inner-spin-button,
            input[type=number]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
            
            .warp {
                position: relative;
                margin: 50px;
            }
            
            input {
                position: absolute;
                top: 0;
                left: 0;
                width: 210px;
                height: 20px;
                background: transparent;
                border: none;
                letter-spacing: 35px;
                padding-left: 8px;
                outline: none;
            }
            
            .box {
                font-size: 0;
            }
            
            .box span {
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-right: 20px;
                border: 1px solid #eee;
                font-size: 16px;
                color: #666;
            }
        </style>
    </head>

    <body>
        <div class="warp">
            <input type="number" />
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <script>
            var inputValue = document.querySelector("input");
            //input.value长度大于5或等于5取前5位并让它失去焦距
            inputValue.oninput = function() {
                if(inputValue.value.length >= 5) {
                    inputValue.value = inputValue.value.slice(0, 5);
                    inputValue.blur();
                }
            }
        </script>
    </body>

</html>