input标签失去焦点,使文本框获得输入焦点

　　这个标题可能很难理解，但我相信大家都见过这种效果。你可以看看这个网站右上角的搜索输入框。默认情况下，会显示提示“输入搜索内容”。当这个输入框获得焦点时，它会自动清除并等待用户的输入。当用户在没有输入任何内容的情况下离开该输入框时，在输入框中再次显示提示“输入搜索内容”。不是很常见吗？很多搜索、登录、表单都会用到这个效果，但我见过N多个网站，90%以上都是这样实现的：

　　Type= text value=不推荐 onfocus=if(this.value==不推荐)this . value= onblur= if(this . value= )this . value=不推荐 /

　　我非常反对在html标签里写javascript，这和在html标签里写风格是一样的。虽然不违反W3C标准，但不推荐。因为：

　　1.一点重用性都没有。如果是一个有很多输入框的表单，每一个都需要这样的效果，你会这样对待每一个吗？

　　2.如果要修改提示文字，费时费力，不容易维护。

　　3.我们提倡结构(html)、展现(css)、行为(javascript)分离，这是一个很好的页面。

　　怎么写才能达到这种效果，而且可复用，易维护，不用把js写成html？

　　我相信我们都加载了jQuery，所以我写了一个基于jQuery的方法。我们先来看看DEMO。具体方法如下：

　　1.html部件：

　　type= text id= input _ test value=输入提示测试/

　　2.jQuery简介：

　　script type= text/JavaScript src= http://Ajax . Google APIs . com/Ajax/libs/jquery/1 . 7 . 2/jquery . min . js /script

　　3.执行脚本：

　　$( function() {

　　var inputEl=$(

　　#input_test )，

　　def val=input El . val()；

　　inputEl.bind({

　　重点：

　　函数(){

　　var _this=$(

　　这个)；

　　if (_this.val()==defVal) {

　　_this.val(

　　);

　　}

　　},

　　模糊：

　　函数(){

　　var _this=$(

　　这个)；

　　if (_this.val()==

　　) {

　　_ this . val(def val)；

　　}

　　}

　　});

　　})

　　实现的最终效果都是一样的，也许是我个人的代码洁癖，但是我相信好的代码是从细节开始的！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。