Placeholder 表单提示文本兼容性解决方案

Question

表单作为和用户交互的网页标签元素，一般都有提示性的文字，标识用户如何操作和填写表单，而在以往的网页开发中，一般都使用 JavaScript 脚本控制这个文字的显示和隐藏，而 HTML5 给我们带来了一个新的属性 Placeholder。

什么是 Placeholder？

Placeholder 是 HTML5 新增的一个表单标签属性，当 input 或者 textarea 设置了该属性后，该属性的值将作为灰字提示显示在文本框中，当文本框获得焦点（或输入内容）时，提示文字自动消失。

Placeholder 兼容性

由于 Placeholder 是 HTML5 的新属性，所以只能兼容支持 HTML5 的浏览器，例如IE8以下的浏览器就无法显示，设置了该属性，表单元素没有任何变化。  截图数据来自网站：http://caniuse.com 由上图的数据可以得知，目前最新的 Firefox、Chrome、Safari 以及 IE10 都支持，IE6 到 IE9 都不支持，Placeholder 的文字在各个浏览器下基本都是淡灰色显示。 不同的地方在于，在Firefox和Chrome下，输入框获得焦点时，Placeholder 文字没有变化，只有当输入框中输入了内容时，Placeholder 文字才消失；而在 Safari 和 IE10 下，当输入框获得焦点时，Placeholder文字便立即消失。

修改 Placeholder 文本颜色

默认情况下，Placeholder 的文字是灰色，输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么，如何修改 Placeholder 的色值呢？ 如果直接写input{color:red;}，IE10 和 Firefox下，Placeholder 文字和输入文字都变成了红色，在 Chrome 和 Safari 下，Placeholder 文字颜色不变，只有输入的文字变成红色。 显然，这种做法是行不通的。因为我们只想改变 Placeholder 文字的颜色，并不想改变输入文字的颜色。正确的写法如下：

::-moz-placeholder{color:red;}              //Firefox
::-webkit-input-placeholder{color:red;}     //Chrome,Safari
:-ms-input-placeholder{color:red;}          //IE10

使 Placeholder 兼容所有浏览器

前面我们知道了，IE6 到 IE9 并不支持原生的 Placeholder，并且即使在支持原生 Placeholder 的浏览器上，其表现也并不一致。在实际项目中，如何使所有浏览器都一致地支持 Placeholder呢？

1、如果只需要让不支持 Placeholder 的浏览器能够支持改功能，并不要求支持原生 Placeholder 的浏览器表现一致，那么可以采用如下方法：

function placeholder(nodes,pcolor) {
  if(nodes.length && !("placeholder" in document_createElement("input"))){
    for(i=0; i<nodes.length; i++){
      var self = nodes[i], placeholder = self.getAttribute('placeholder') || '';     
      self.onfocus = function(){
        if(self.value == placeholder){
          self.value = '';
          self.style.color = "";
        }
      }
      self.onblur = function(){
        if(self.value == ''){
          self.value = placeholder;
          self.style.color = pcolor;
        }
      }
      self.value = placeholder;
      self.style.color = pcolor;             
    }
  }
}

2、如果需要自定义样式，并且希望 Placeholder 在所有浏览器下表现一致，可以通过利用 label 标签模拟一个 Placeholder 的样式放到输入框上，当输入框获得焦点的时候隐藏 label，当输入框失去焦点的时候显示 label。

<script>
$(function(){
  $('.for_text').click(function(){
    $('.text').focus()
  })
  $('.text').blur(function(){
    $('.for_text').hide();
  })
})
</script>
<style>
.for_text{ position:absolute; cursor:text; margin:5px; color:#999;}
.text{ padding:5px;}
</style>
<form>
<label for="text" class="for_text">请输入文本</label>
<input type="text" name="text" class="text"/>
</form>

3、最后一种方法，也是使用最常见的，但是不能改变文本的颜色，使用脚本的方式判断文本框的值，获取焦点或者输入文本的时候，如果为预设的值，那么就清空文本框，失去焦点的时候，如果文本框的值为空，则替换为我们预设的值。

<input type="text" name="text" value="请输入文本" class="text"
onFocus="if(this.value=='请输入文本') this.value = ''"
onBlur="if(this.value=='') this.value='请输入文本'"
/>

实现方法有很多种，欢迎在评论里面各抒已见，期待你的新创意。