实现placeholder效果的方案汇总

placeholder是html5<input>的一个属性，它提供可描述输入字段预期值的提示信息（hint）， 该提示会在输入字段为空时显示。高端浏览器支持此属性（ie10/11在获得焦点时文字消失），ie6/7/8/9则不支持。为了兼容各主流浏览器并使其呈现效果保持一致，以下三套方案仅供参考。

方案一：

摒弃原始属性placeholder，为input添加一个兄弟节点span，并为span设置绝对定位（父节点为position: relative;），使其位于input之上。html代码片段如下：

<li>  <div class="inputMD" style="position: relative;">    <input class="phInput" type="text" />    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">手机号码/邮箱地址</span>  </div></li><li>  <div class="inputMD" style="position: relative;">    <input class="phInput" type="password" />    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">请输入密码</span>  </div></li>

js代码如下（简单写了个函数，没写插件形式，呵呵）：

function _placeholderText(phInput, phText) { //定义函数，传递2个参数——input输入框和text提示文本的id或者class  var $input = $(phInput);  var $text = $(phText);  $input.each(function() { //页面加载时遍历所有仿placeholder的input    var _this = $(this);    var _text = _this.siblings(phText);    if($.trim(_this.val()) == '') {      _this.val("");      _text.show();    } else {      _text.hide();    }  });  $text.on('click', function() { //点击提示信息，input获取焦点    $(this).siblings(phInput).focus();  });  $input.on('input propertychange blur', function() { //为input注册事件，value值改变（其实是属性发生变化）时以及失去焦点时判断value值是否为空    var _this = $(this);    if(_this.val() == '') {      _this.siblings(phText).show();    } else {      _this.siblings(phText).hide();    }  });}_placeholderText('.phInput', '.phText'); //调用函数

个人总结：方案一适用于登录页面，但对于后台form表单及前台的搜索页面不太适合，因为要增加新的提示文本标签，不太友好。

方案二：

同样摒弃原始属性placeholder，为<input>添加一个属性phText="手机号码/邮箱地址"。默认状态下，value值为提示文本并且颜色为灰色；<input>获得焦点时，若value值等于phText属性值，则value值置空；<input>失去焦点时，若value值为空，则value值为提示文本。js代码如下：

function inputJsDIY(obj, colorTip, colorTxt) { //定义函数，传递3个参数——DOM对象、提示文本的颜色值、输入文本的颜色值  colorTip = colorTip || '#aaaaaa';  colorTxt = colorTxt || '#666666';  obj.each(function() {    var _this = $(this);    _this.css({"color": colorTip}); //输入框颜色默认置为提示文本的颜色值    if($.trim(_this.val()) == "") { //判断value值是否为空，若为空则value值赋值等于提示文本      _this.val(_this.attr("phText"));    } else if(_this.val() != _this.attr("phText")) {      _this.css({"color": colorTxt}); //正常的输入文本颜色值    }  });  obj.on("focus", function() { //获取焦点时做判断    var _this = $(this);    var value = _this.val();    if(value == _this.attr("phText")) {      _this.val("");    }    _this.css({"color": colorTxt});  });  obj.on("blur", function() { //失去焦点时做判断    var _this = $(this);    var value = _this.val();    if($.trim(value) == "") {      _this.val($(this).attr("phText")).css({"color": colorTip});    }  });  obj.parents("form").on("submit", function() { //提交表单时去除提示文本（把提示文本置空）    obj.each(function() {      var _this = $(this);      if(_this.val() == _this.attr("phText")) {        _this.val("");      }    });  });}inputJsDIY($('.phInput'), '#aaa', '#666'); //调用函数