13518219792
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。
创新互联是一家专注于成都网站设计、成都网站制作、外贸网站建设与策划设计,扶风网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:扶风等地区。扶风做网站价格咨询:028-86922220
实例:
1
placeholder操作起来非常方便，提高了开发效率，同时在高版本浏览器中用户体验也很好，所以本人很喜欢用这个属性。
然而，在IE9以下版本浏览器就失效了，并且IE10+支持placeholder属性，它的表现与其它浏览器也不一致
IE10+里鼠标点击时（获取焦点）placeholder文本消失
Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失
那么作为一名开发人员，是否应该去克服解决这个问题呢。目前网上也一堆类似解决方案，大致实现思路分为两种：
(方式一)使用input的value作为显示文本，模拟灰色样式，focus让$("[placeholder]").val()=="",blur时$("[placeholder]").val(this.defaultValue)；
(方式二)不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面。
在这里因第一种方式实现起来，占用了value且验证时需要做额外的判断，那么个人建议使用第二种方式。
首先，判断当前浏览器是否支持placeholder属性：
1 function placeholderSupport() {2 return 'placeholder' in document.createElement('input');3 }
上关键代码：
/**placeholder兼容ie9以下 author：高丰鸣 add 2016-1-27*/$(function(){if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
$(document).ready(function(){ //默认遍历循环添加placeholder
$('[placeholder]').each(function(){
$(this).parent().append(""+$(this).attr('placeholder')+"");
})
$('[placeholder]').blur(function(){ if($(this).val()!=""){ //如果当前值不为空，隐藏placeholder
$(this).parent().find('span.placeholder').hide();
} else{
$(this).parent().find('span.placeholder').show();
}
})
});
}
});
