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