6、关于onfocus和onblur实现搜索框

1、使用onfocus和onblur实现搜索框

      1.1  html代码     

<body>
	<input type="text" name="search" id="searchid" value="请输入要搜索的内容" /> 搜索
</body>

     1.2 Javascript代码

<script type="text/javascript">
	/**
	* 封装一个简单的函数
	* @param {Object} id
	*/
		function $(id) {
			return document.getElementById(id);
		}

		window.onload = function() {
			$('searchid').onfocus = function() {
				/**
				* 1、输入框获得焦点的时候
				*/
				this.value = '';
			}
			$('searchid').onblur = function() {
					/**
					* 1、输入框获得焦点的时候
					*/
					this.value = '请输入要搜索的内容';
				}
				/**
				* 2、当页面加载完毕的时候,让输入框获得焦点
				*/
				/*$('searchid').focus();*/
			}
</script>

2、使用html5的placeholder实现搜索框

      2..1 html代码

<body>	
	<input type="text" placeholder="输入 回车搜索">搜索
</body>


你可能感兴趣的:(placeholder,onblur,onfocus,搜索框的实现)