搜索框关键字提示代码点击后消失移开又重现
feilong.org 修订于2009-12-13 10:06:00 382 次浏览如何写搜索框关键字提示代码，飞龙认为最好的方式是，默认状态下有关键字提示文字，但是但点击input内，提示文字消失，而但鼠标移出input文本框，提示文字又出来。但是当手工输入了文字后，输入的文字一直保留，知道输入另外的关键字或离开此网页。本文更新网址：http://feilong.org/search-kewords-onfocus，20110年6月4日飞龙第5次修订。
首先如何设置搜索关键字的默认值(value)？其次悬停或点击搜索文本框后 value能否自动消失？再次不点击又如何重新出现？最后输入文本后，再点击文本框，还能依然保留输入的文字？
一、以下是搜索框关键字提示代码，直接写在html里。本质是javascript实现的：
|
1 2 3 |
<form id="searchform" action="http://feilong.org/search"> <label for="s"><input type="text" name="q" id="s" value="search" onfocus="if (this.value == 'search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search';}" /></label> </form> |
二、也可以不直接写在html，而是先封装的下面的js函数
|
1 2 3 4 5 |
<script language="javascript"> function flonfocus(){ this.value=(this.value=='搜索飞龙') ? '' : this.value;" onblur="this.value=(this.value=='') ? '搜索飞龙' : this.value; } </script> |
然后html引用此js函数：
|
1 2 3 |
<form id="searchform" action="http://feilong.org/search"> <label for="s"><input type="text" name="q" id="s" value="search" onfocus="flonfocus();" /></label> </form> |
文本区域textarea提示的写法，参见：http://feilong.org/textarea-value-onfocus
更新网址：https://feilong.org/search-kewords-onfocus
最初发布：20091213 10:06:00 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发