本文介绍了一种使用HTML和JavaScript实现的输入框默认值显示与清除的方法。当用户点击输入框时，如果输入框中显示的是默认值，则清除默认值以便用户输入；当用户离开输入框时，如果没有输入内容，则恢复默认值。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.txt-input {color:#999;}
</style>
</head>
<body>
<form action="">
<input type="text" name="keywords" value='三体' val='三体' class="txt-input" />
<input type="submit" value="搜索" />
</form>
<script type="text/javascript">
var inputs = document.getElementsByTagName('input');
var dval = inputs[0].getAttribute('val');
//给文本框注册focus事件
inputs[0].onfocus = function(){
//需要判断文本框中的内容是否是默认的
//获取自定义属性
//清除文本框中的内容
if (this.value == dval) {
this.value = "";
}
this.style.color = "#333";
}
//给文本框注册blur事件
inputs[0].onblur = function(){
//需要判断文本框中的内容是否为空
if (this.value == '') {
this.value = dval;
this.style.color = "#999";
}
}
</script>
</body>
</html>
扫一扫
1135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
