验证码输入前有横线，输入数字或字母后消失的小demo

最新推荐文章于 2022-08-17 23:29:34 发布

荷兰豆叶子上的水熊

最新推荐文章于 2022-08-17 23:29:34 发布

阅读量2.4k

点赞数

分类专栏： css html 文章标签： css html

本文链接：https://blog.youkuaiyun.com/u010200033/article/details/80381405

版权

css 同时被 2 个专栏收录

1 篇文章

订阅专栏

html

1 篇文章

订阅专栏

这是一个关于验证码输入框的交互设计小示例。在输入框中预设了一条横线，当用户开始输入数字或字母时，横线会随之消失，提供更友好的用户体验。该效果主要通过CSS和HTML实现。

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

示意图

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .box{
                width: 600px;height: 50px;border:2px solid;margin:100px auto;
                list-style: none;padding: 0;
                display: flex;
            }
            .box>li{
                flex:1;position: relative;
                text-align: center;line-height: 50px;
            }
            .box>li>span{
                display:block;
                width: 50%;height: 3px;background-color: #000;
                position:absolute;
                top:70%;left: 50%;
                margin-left: -25px;
            }


        </style>
    </head>
    <body>
        <ul class="box">
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
        </ul>

        <script type="text/javascript">
            let n = 0;
            let lis = document.getElementsByTagName('li');
            document.onkeyup = function(e){
                e = e || window.event; 
                key = e.keyCode || e.which || e.charCode; 
                if( (65<=key&& key<=90) || (48<=key && key<=57) || (96<=key && key<=105) ) 
                {   
                    if(n<=5){

                        lis[n].innerHTML = e.key;
                        n++;
                        
                    }

                }
                if( key==8 ){
                    if(n>0){
                        n--;
                        let span = document.createElement('span');
                        lis[n].innerHTML = null;
                        lis[n].appendChild(span)
                    }

                }

               
            }
        </script>
          


    </body>
</html>