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

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

//本文主要讲解密码框添加小眼睛例子和账号输入框添加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> 

//样式,位置js这些可以根据个人喜好进行调整。还有就是X和眼睛的图标需要自己去下载,或者换成其它图标也行。
//废话多了点,如果你有更好的方法,欢迎指点,交流。

展开阅读全文

没有更多推荐了,返回首页