飞龙博客

feilong.org 前端开发教程

搜索框关键字提示代码点击后消失移开又重现

飞龙更新于 2009-12-13 10:06 加入书签 CTRL+D 有 90 个朋友来过

如何写搜索框关键字提示代码,飞龙认为最好的方式是,默认状态下有关键字提示文字,但是但点击input内,提示文字消失,而但鼠标移出input文本框,提示文字又出来。但是当手工输入了文字后,输入的文字一直保留,知道输入另外的关键字或离开此网页。本文更新网址:http://feilong.org/search-kewords-onfocus,20110年6月4日飞龙第5次修订。

首先如何设置搜索关键字的默认值(value)?其次悬停或点击搜索文本框后 value能否自动消失?再次不点击又如何重新出现?最后输入文本后,再点击文本框,还能依然保留输入的文字?

一、以下是搜索框关键字提示代码,直接写在html里。本质是javascript实现的:

<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函数

<script language="javascript">
function flonfocus(){
this.value=(this.value=='搜索飞龙') ? '' : this.value;" onblur="this.value=(this.value=='') ? '搜索飞龙' : this.value;
}
</script>

然后html引用此js函数:

<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

飞龙初发:
2009-12-13 10:06
本文更新网址:
https://feilong.org/search-kewords-onfocus

所在目录: 网站开发

新作:

旧文:

  • html css js
  • angular react vue
  • flutter python