表单输入框聚焦输入内容显示叉叉清除效果
2019-01-24 本文已影响3人
菜菜___
处理表单的时候，经常有这种效果，当我们输入内容的时候输入框右边会动态显示一个叉叉图标，点击可以清除已输入的内容，当输入框没有输入内容时，叉叉会自己消失，当输入框焦点消失时，叉叉也会自己消失，最近刚好写了一个这样的效果，分享给大家，效果图如下所示：
一：页面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" onfocus="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)" onclick="">登录</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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流
