javascript 将输入框 js的输入框_输入框

效果为：当输入框获得焦点时课输入搜索内容，失去焦点时，如果输入内容为空，输入框的内容显示“请输入关键字”；

书写js的思路为：

1.第一步获取输入框

2.写当输入框获得焦点，(即ondocus)时的函数

　　获得焦点时，输入框的内容置为空，样式为空，再可以进行输入

3.写输入框失去焦点，（即onblur）时的函数

　　失去焦点，输入框内容为自己输入的内容，如果内容为空，就显示“请输入关键字”；

 

js代码：

javascript 将输入框 js的输入框_javascript 将输入框_02

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Input</title>
	<style type="text/css">
		.gray{
			color:gray;
		}
	</style>
</head>
<body>
	<input type="text" id="txtSearch" class="gray" value="请输入关键字">
	<input type="button" value="搜索">
	<script type="text/javascript">
		function My(id){
	return document.getElementById(id);
} 
	var txtSearch=My('txtSearch');
	txtSearch.onfocus=function(){			//输入框获得焦点
		if(this.value=="请输入关键字"){
			this.value="";
			this.className="";
		}
	}
	txtSearch.onblur=function(){	
	if(this.value.length==0){
		this.value="请输入关键字";
		this.className="gray";
	}	//输入框失去焦点	}
	</script>
</body>
</html>