Question

如何解决placeholder的兼容性

Answer 1

　　Placeholder在不支持html5的低版本的浏览器中，placeholder属性是无效的，例如ie9及以下的ie浏览器不兼容这个属性。下面介绍placeholder兼容性的处理
　　在页面添加如下脚本
　　$（function（） {
　　// 如果不支持placeholder，用jQuery来完成
　　if（！isSupportPlaceholder（）） {
　　// 遍历所有input对象， 除了密码框
　　$（‘input’）。not（“input[type='password']”）。each（
　　function（） {
　　var self = $（this）；
　　var val = self.attr（“placeholder”）；
　　input（self, val）；
　　}
　　）；
　　/**//* 对password框的特殊处理
　　* 1.创建一个text框
　　* 2.获取焦点和失去焦点的时候切换
　　*/
　　$（‘input[type=“password”]’）。each（
　　function（） {
　　var pwdField = $（this）；
　　var pwdVal = pwdField.attr（‘placeholder’）；
　　var pwdId = pwdField.attr（‘id’）；
　　// 重命名该input的id为原id后跟1
　　pwdField.after（‘<input id=“' + pwdId +'1” type=“text” value='+pwdVal+' autocomplete=“off” />’）；
　　var pwdPlaceholder = $（‘#' + pwdId + '1’）；
　　pwdPlaceholder.show（）；
　　pwdField.hide（）；
　　pwdPlaceholder.focus（function（）{
　　pwdPlaceholder.hide（）；
　　pwdField.show（）；
　　pwdField.focus（）；
　　}）；
　　pwdField.blur（function（）{
　　if（pwdField.val（） == '‘） {
　　pwdPlaceholder.show（）；
　　pwdField.hide（）；
　　}
　　}）；
　　}
　　）；
　　}
　　}）；
　　// 判断浏览器是否支持placeholder属性
　　function isSupportPlaceholder（） {
　　var input = document.createElement（'input’）；
　　return 'placeholder' in input;
　　}
　　// jQuery替换placeholder的处理
　　function input（obj, val） {
　　var $input = obj;
　　var val = val;
　　$input.attr（{value:val}）；
　　$input.focus（function（） {
　　if （$input.val（） == val） {
　　$（this）。attr（{value:“”}）；
　　}
　　}）。blur（function（） {
　　if （$input.val（） == “”） {
　　$（this）。attr（{value:val}）；
　　}
　　}）；
　　}