<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索文本框</title>
<style type="text/css">
.gray{
color: gray;
}
.black{
color: black;
}
</style>
</head>
<body>
<input type="text" class="gray" id="txt" value="请输入搜索内容"/>
<input type="button" id="btn" value="搜索" />
<script type="text/javascript">
var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
//当文本框获取焦点时,如果之前文本框里的内容是'请输入搜索内容',则清空文本框,输入的字的颜色为黑色
txt.onfocus = function(){
if(this.value === '请输入搜索内容'){
this.value ='';
this.className = 'black';
}
}
//当文本框失去焦点时,如果之前的文本框的内容为空,则让文本框内的字为'请输入搜索内容',字的颜色为灰色
txt.onblur = function(){
if(this.value.length === 0 ){
this.value = '请输入搜索内容';
this.className = 'gray';
}
}
</script>
</body>
</html>
webAPI03-11搜索文本框
最新推荐文章于 2023-02-05 16:56:24 发布