Hosy~Ye 的部落宅

input清除文字

2018-02-01

delete

1
2
<input class="input" id="input" required>
<a href="javascript:" class="clear" id="clear"></a>

使用css显示与隐藏清除图标icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.input { 
	padding: 5px; 
	margin: 0; 
	border: 1px solid #beceeb; 
}
.clear { 
	display: none; 
	position: absolute; 
	width: 16px; 
	height: 16px; 
	margin: 6px 0 0 -20px; 
	background: url(clear.png) no-repeat; 
	outline: none; 
}
.input::-ms-clear { 
	display: none; 
}
.input:valid + .clear { 
	display: inline; 
}
1
2
3
4
5
var val = document.getElementById('input');
var on_cl = document.getElementById('clear');
on_cl.onclick = function () {
	val.value = '';
}