六位input输入框的短信验证码(PC jQ)

最新推荐文章于 2024-08-30 15:34:37 发布

lorena0928

最新推荐文章于 2024-08-30 15:34:37 发布

阅读量6.3k

点赞数 2

分类专栏：常用小功能

本文链接：https://blog.csdn.net/lorena0928/article/details/80997564

版权

本文介绍如何使用jQuery实现一个六位数字的输入框，适用于PC端的短信验证码验证。提供了完整的HTML代码示例，需要注意正确引入相关的JS和CSS文件。

摘要由CSDN通过智能技术生成

六位input输入框的短信验证码(PC) jQ

这里写图片描述

完整代码直接复制下边html，注意引入js css 文件

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <script src="../js/commonJs/jquery-1.8.3.min.js"></script>
    <title>六位input输入框的短信验证码(PC) </title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
    <style>
        /*弹框验证码*/
        .ipt-fake-box {
            text-align: center;
        }
        .input {
            display: inline-block;
        }
        .input:last-child {
            border-right: 1px solid #999;
        }
        input.my_input {
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
            border-left: 1px solid #999;
            width: 45px;
            height: 45px;
            outline: none;
            font-family: inherit;
            font-size: 28px;
            font-weight: inherit;
            text-align: center;
            line-height: 45px;
            color: #c2c2c2;
            background: rgba(255, 255, 255, 0);
        }
    </style>
    <script src="../js/commonJs/bootstrap.min.js">