当输入框获得和失去焦点时隐藏或显示文本。我们先来看看渲染： 输入框的默认状态。

获取输入框： 的焦点状态。

可以看到渲染的搜索输入框，默认显示“用户名/邮件”的提示。当输入框获得焦点时，它会自动清空并等待用户输入。当用户离开输入框而没有输入任何内容时，输入框中会再次显示“用户名/电子邮件”的提示。很常见吗？很多搜索、登录、表单都会用到这种效果，但我看到的网站不止n个。其中90%以上实现如下：复制代码如下：输入类型='text '值=' search关键字' onfocus=' if(this . value==' search关键字')this。value=' on bulr=' if(this。value==' ')。this . value=' search keywords '/我非常反对用html标签写javascript，这和用html标签写风格是一样的。虽然不违反W3C标准，但不建议这样写。因为：1。根本没有可重用性。如果是一个表单，有很多输入框，每一个都需要这样的效果，会不会每一个都这样处理？2.如果要修改提示文本，费时费力，维护困难。3.我们提倡结构(html)、表示(css)和行为(javascript)的分离，这是一个很好的页面。如何才能达到这种可重用、易维护、不需要把js写成html的效果？方法如下：首先，必须引入jQuery Html代码；复制代码如下： divinput type=' text ' value=' prompt test ' class=' input _ test '/Div input type=' text ' value='请输入搜索关键字' class=' input _ test '/Div jQuery代码：复制代码如下：脚本类型=' text/JavaScript ' src=' http :3358 Ajax . googleapi.com/Ajax/libs/jQuery/1input _ test’)。bind({ focus : function(){ if(this . value==this . DefaultValue){ this . value=' '；} }，blur : function(){ if(this . value==' '){ this . value=this . DefaultValue；} } });})/脚本您可以通过在实现的输入框中添加类“input_test”来轻松查看：Demo。