處理表單的時候，經(jīng)常有這種效果，當我們輸入內(nèi)容的時候輸入框右邊會動態(tài)顯示一個叉叉圖標，點擊可以清除已輸入的內(nèi)容，當輸入框沒有輸入內(nèi)容時，叉叉會自己消失，當輸入框焦點消失時，叉叉也會自己消失，最近剛好寫了一個這樣的效果，分享給大家，效果圖如下所示：
一：頁面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，并監(jiān)聽輸入框聚焦事件，聚焦后邊框高亮顯示，如果輸入框有輸入內(nèi)容，則顯示叉叉圖標
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){
/*監(jiān)聽輸入框聚焦事件*/
$("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>
四：監(jiān)聽輸入框失去焦點事件，失去焦點去除邊框高亮顯示并且叉叉圖標隱藏
/*輸入框失去焦點的blur事件*/
$("input").on("blur",function () {
var $this = $(this);
$this.parent().removeClass("active");
$this.next(".delete-icon").hide();
});
五：監(jiān)聽鼠標松開事件，當輸入框有輸入內(nèi)容就顯示叉叉圖標，反之則不顯示
$("input").keyup(function(){
if( $(this).val().length > 0){
$(this).next(".delete-icon").show();
}else{
$(this).next(".delete-icon").hide();
}
});
六：叉叉圖標綁定點擊刪除輸入框內(nèi)容事件
/*刪除圖標的點擊事件*/
$(".delete-icon").on("click",function () {
$(this).prev("input").val("").focus();
});
七：表單需要的事件都已經(jīng)添加完了，但是我們發(fā)現(xiàn)當我們點擊叉叉圖標的時候，并不會清空輸入框的內(nèi)容，而是圖標消失不見了，那么需要阻止瀏覽器默認事件,解決blur事件比click事件先執(zhí)行的問題，為什么這樣寫可以參考上一篇文章：blur事件與click事件沖突的解決辦法，里面還介紹了多種解決方案
/*阻止瀏覽器默認事件,解決blur事件比click事件先執(zhí)行的問題*/
$(".delete-icon").on("mousedown",function(e) {
e.preventDefault();
})
這樣就完整地實現(xiàn)了效果，四五六七步驟的代碼都放在頁面加載完即$(function(){})里。
原文作者技術博客：http://www.itdecent.cn/u/ac4daaeecdfe
95后前端妹子一枚，愛閱讀，愛交友，將工作中遇到的問題記錄在這里，希望給每一個看到的你能帶來一點幫助。
歡迎留言交流
