处理表单的时候,经常有这种效果,当我们输入内容的时候输入框右边会动态显示一个叉叉图标,点击可以清除已输入的内容,当输入框没有输入内容时,叉叉会自己消失,当输入框焦点消失时,叉叉也会自己消失,最近刚好写了一个这样的效果,分享给大家,效果图如下所示:
一:页面html代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="login"> <form action="" method="post" namespace="/"> <h4>用户登录</h4> <ul class="login-con"> <li> <i class="i-icon l-icon"></i> <input class="active" type="text" name="username" placeholder="请输入您的用户名" maxlength="16" autocomplete="off"/> <i class="i-icon delete-icon"></i> </li> <li> <i class="i-icon l-icon"></i> <input class="active" type="text" name="password" οnfοcus="this.type='password'" placeholder="请输入您的密码" maxlength="16" autocomplete="off"/> <i class="i-icon delete-icon"></i> </li> </ul> <p class="error-msg"></p> <div class="login-btn"> <a href="javascript:void(0)" οnclick="">登录</a> </div> </form> </div> </body> </html>
二:css样式代码,放在head标签里:
<style> *{ margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; } .login { width: 380px; margin: 0 auto; position: relative; padding: 40px; border-radius: 4px; background-color: #fff; } .login h4{ margin-bottom: 20px; font-weight: normal; font-size: 22px; color: #333; } .login .login-con li{ position: relative; width: 300px; height: 50px; margin-bottom: 20px; border-radius: 4px; border: solid 1px #bfbfbf; font-size: 0; } .login .login-con li.active{ border: solid 1px #66b0d9; } .login .login-con input{ width: 239px; line-height: 48px; vertical-align:middle; font-size:16px; color:#333; background-color: #fff; border: none; outline: none; } input::-webkit-input-placeholder { color: #a19f9f; } input::-moz-placeholder { color: #a19f9f; } input:-ms-input-placeholder { color: #a19f9f; } .i-icon{ display: inline-block; } .login .login-con li .i-icon.l-icon{ margin-left: 20px; margin-right: 20px; width: 18px; height: 18px; vertical-align: middle; } .login .login-con li:nth-child(1) .i-icon.l-icon{ background-image: url("image/user-icon.jpg"); } .login .login-con li:nth-child(2) .i-icon.l-icon{ background-image: url("image/password-icon.jpg"); } .login .login-con li .i-icon.delete-icon{ display: none; position: absolute; right: 20px; top:17px; width: 16px; height: 16px; vertical-align: middle; background-image: url("image/delete-icon.jpg"); cursor: pointer; } .login .login-btn{ margin-bottom: 30px; text-align:center; } .login .login-btn a{ display:block; color:#fff; padding:13px 0; background-color: #1c9dff; border-radius: 4px; font-size: 18px; text-decoration: none; } .login .error-msg{ padding-top: 20px; height: 30px; color: #f00; } </style>
三:引入jquery,并监听输入框聚焦事件,聚焦后边框高亮显示,如果输入框有输入内容,则显示叉叉图标
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script> <script> $(function(){ /*监听输入框聚焦事件*/ $("input").on("focus",function () { $(this).parent().addClass("active"); if( $(this).val().length > 0){ $(this).next(".delete-icon").show(); }else{ $(this).next(".delete-icon").hide(); } }) }) </script>
四:监听输入框失去焦点事件,失去焦点去除边框高亮显示并且叉叉图标隐藏
/*输入框失去焦点的blur事件*/ $("input").on("blur",function () { var $this = $(this); $this.parent().removeClass("active"); $this.next(".delete-icon").hide(); });
五:监听鼠标松开事件,当输入框有输入内容就显示叉叉图标,反之则不显示
$("input").keyup(function(){ if( $(this).val().length > 0){ $(this).next(".delete-icon").show(); }else{ $(this).next(".delete-icon").hide(); } });
六:叉叉图标绑定点击删除输入框内容事件
/*删除图标的点击事件*/ $(".delete-icon").on("click",function () { $(this).prev("input").val("").focus(); });
七:表单需要的事件都已经添加完了,但是我们发现当我们点击叉叉图标的时候,并不会清空输入框的内容,而是图标消失不见了,那么需要阻止浏览器默认事件,解决blur事件比click事件先执行的问题,为什么这样写可以参考上一篇文章:blur事件与click事件冲突的解决办法,里面还介绍了多种解决方案
/*阻止浏览器默认事件,解决blur事件比click事件先执行的问题*/ $(".delete-icon").on("mousedown",function(e) { e.preventDefault(); })
这样就完整地实现了效果,四五六七步骤的代码都放在页面加载完即$(function(){})里。
原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流