关于placeholder(转)

 

 

最近公司网站改版的过程中，搜索框有一些提示信息比如“关键字”之类，不写吧用户可能不知道这个搜索框是用来做什么的，写了吧点击搜索之后默认就把这些提示信息提交给数据处理页面处理去了，有点麻烦，而且也没有必要再去数据库查一次这个提示信息。

  后来一位前辈说可以用jquery 的插件 placeholder来解决这个问题，这个插件使用也很简单，在页面引入这个插件，$.Placeholder.init();来初始化这个插件，然后在你要用到提示信息的地方用自定义的标签：placeholder = “关键字” 这样来写提示信息。效果如下：

 

 但是问题来了，firefox，IE下都能实这个效果，chrome和safari点击后不会消失，得输入东西之后才会消失。本人在CSS方面菜鸟一只，后来让公司一位前段的同事去调试这个，最后在CSS里面加了一段：

input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder{color:transparent;} 

就可以了。这段代码可能网上有，但是本人喜欢记录自己遇到的问题，以及解决方法。

其中的原理吧，咱也不懂，因为这可能涉及到浏览器内核什么的，还望知道的给讲解一下。