您的位置：首页 > 其它

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

2016-05-04 11:25 330 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航