HTML密码框添加小眼睛和x按钮。

最新推荐文章于 2024-06-26 15:51:34 发布

qq_40939905

最新推荐文章于 2024-06-26 15:51:34 发布

阅读量1.9w

点赞数 8

分类专栏： HTML css 文章标签：输入框小眼睛输入框清除按钮输入框加入文字

本文链接：https://blog.csdn.net/qq_40939905/article/details/81613333

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

  **此篇文章为个人原创，欢迎参考学习**

//本文主要讲解密码框添加小眼睛例子和账号输入框添加X图片做清除功能。
这里写图片描述
//实现这个功能很容易，或许你们有其它方法实现，欢迎来交流！
//我先来说说我的思路。
先把结构打出来；

<div class="big">
                    <span class="span_tp" id="zhanghao" style="">账号：</span>
                    <input class="input_tp" data-role = "none" id="tel" value="" type="text" name="tel1" placeholder="请输入手机号码："/>
                    <a id="delete" class="tubiao" title="清除" ><img src="../img/delete-black.png"/></a>
                    <br />
                    <span class="span_tp" id="mima">密码：</span>
                    <input class="input_tp" data-role = "none" id="pass" value="" type="password" name="pass1" placeholder="请输入密码："/>
                    <a id="dj" class="tubiao" title="点击隐藏或显示密码"><img src="../img/eye-black.png"/></a>
                    <br />
        </div>

然后，定义div并且用text-align:center设置里面的内容居中显示。
input输入框设置：input输入框设置宽度width 80%，高height：30px，用padding定义input里面的左内距和右内距，这个可以根据自己的需求调整。
span文字设置：position：absolute设置标签绝对定位，right边距离12%，其它属性用来调整位置的，就不详细介绍了。
a 标签设置：主要是对a标签里面的设置。注意这个也是定义绝对定位，opactity来设置透明度，鼠标悬停时改变透明度，视觉感更好。
图片可根据自己的喜号下载，加入即可。

<style>
.big{text-align: center;    }
.input_tp{width: 80%;height: 30px;border-radius: 10px;padding-left: 48px; padding-right: 30px;}
.span_tp{position: absolute;margin-top: 5px;margin-left: 5px;}
.tubiao{width: 30px;  height: 25px; position: absolute;    right: 12%; padding-top: 8px;opacity: 0.5;}
.tubiao:hover{opacity: 1;}

    </style>

//样式做完了就可以添加响应效果了，我引用的是jQuery框架。

<script type="text/javascript">
        $(document).ready(function(){
             $("#delete").click(function(){
            $("#tel").val(""); //点击图标后响应，清空输入框数据
        }); 
         $("#dj").click(function(){
         //点击眼睛，如果input输入框为为text时执行，并改成password实现隐藏。
        if($("#pass").attr("type")=="text"){
            $("#pass").attr("type","password");
            $("#dj img").css("opacity",0.5)
        }
        //点击眼睛，如果input输入框为为password时执行，并改成text实现隐藏。
        else{
            $("#pass").attr("type","text");
            $("#dj img").css("opacity",1)
        }
    }); 
        });
    </script>

//下面列出全部代码，可参考。

        <html>
    <head>
        <meta charset="utf-8" />
        <title></title> 
        <script type="text/javascript" src="../js/jquery-1.12.4.min.js" ></script>
    <style>
.big{text-align: center;    }
.input_tp{width: 80%;height: 30px;border-radius: 10px;padding-left: 48px; padding-right: 30px;}
.span_tp{position: absolute;margin-top: 5px;margin-left: 5px;}
.tubiao{width: 30px;  height: 25px; position: absolute;    right: 12%; padding-top: 8px;opacity: 0.5;}
.tubiao:hover{opacity: 1;}

    </style>
    <script type="text/javascript">
        $(document).ready(function(){
             $("#delete").click(function(){
            $("#tel").val("");
        }); 
         $("#dj").click(function(){
        if($("#pass").attr("type")=="text"){
            $("#pass").attr("type","password");
            $("#dj img").css("opacity",0.5)
        }
        else{
            $("#pass").attr("type","text");
            $("#dj img").css("opacity",1)
        }
    }); 
        });
    </script>   
    </head>
    <body>
        <div class="big">
                    <span class="span_tp" id="zhanghao" style="">账号：</span>
                    <input class="input_tp" data-role = "none" id="tel" value="" type="text" name="tel1" placeholder="请输入手机号码："/>
                    <a id="delete" class="tubiao" title="清除" ><img src="../img/delete-black.png"/></a>
                    <br />
                    <span id="tel_error" class="error"></span><br />
                    <span class="span_tp" id="mima">密码：</span>
                    <input class="input_tp" data-role = "none" id="pass" value="" type="password" name="pass1" placeholder="请输入密码："/>
                    <a id="dj" class="tubiao" title="点击隐藏或显示密码"><img src="../img/eye-black.png"/></a>
                    <br />
        </div>
    </body>
</html>