html5+css实现六位数字密码输入对话框（类似支付宝，微信）

最新推荐文章于 2024-04-27 19:06:56 发布

christyleylh

最新推荐文章于 2024-04-27 19:06:56 发布

阅读量2.1w

点赞数 1

分类专栏：前端文章标签： html5 css 密码输入框

本文链接：https://blog.csdn.net/qq_34020571/article/details/79577946

版权

本文展示了如何使用HTML5和CSS来实现一个类似支付宝、微信的六位数字密码输入对话框。通过在底层使用type=tel的透明输入框，表层使用type=password，结合CSS样式和jQuery实现最终效果。文中还提供了光标显示的解决方案。

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

先来看看原型图：

直接上代码：

html

<div class="common-part pay-part">
        <div class="common-dialog pay-dialog">
            <div class="dialog-title">请输入支付密码</div>
            <div class="pay-money">$10000.00</div>
            <div class="pay-password">
                <input type="tel" maxlength="6" class="real-ipt">
                <div class="surface-ipts">
                    <div class="surface-ipt">
                        <input type="password" >
                        <input type="password" >
                        <input type="password" >
                        <input type="password" >
                        <input type="password" >
                        <input type="password" >
                    </div>
                </div>
            </div>
            <div class="btns">
                <button class="cancel-btn">取消</button>
                <button class="confirm-btn">付款</button>
            </div>
        </div>
    </div>

这里代码分为了两层input输入框

底层是type=tel（0-9），设置透明opacity: 0;

表层是type=password。

css{