标签：改变 兼容 attr html self ace val ie10 方式
一、
input常用在表单的输入，包括text，password，H5后又新增了许多type属性值，如url, email, member等等，考虑到非现代浏览器的兼容性问题，这些新的type常用在移动端的项目中。
二、
IE10+浏览器下，input标签会有一个默认的样式，比如文本框的‘×’号，密码框的小眼睛。初衷是好的，有时候很方便，但有时候我们会自己设置样式和功能。可以用伪元素方法去除：
::-ms-clear, ::-ms-reveal{display: none;}
三、
在低版本的IE下，input中的文字位置会改变（偏上显示），解决方法：（思路： 设置input的高度=行高）
input { height: 60px; line-height: 60px; margin: 0; padding: 0; outline: none; }
四、
实际中，我们会在input的前面用label标签或其他，提示input的内容信息。在IE下，在获得焦点、失去焦点时，label标签里的文字会出现抖动问题。解决方法：（设置input的显示方式为行内块）
input { display: inline-block; }
五、
##placeholder是H5的一个新属性，但是在IE9以下是不支持的，为此我们会封装一个函数进行能力检测。
参考地址：http://www.studyofnet.com/news/1022.html
###以下是代码部分：
1 $(function() { 2 // 如果不支持placeholder，用jQuery来完成 3 if(!isSupportPlaceholder()) { 4 // 遍历所有input对象, 除了密码框 5 $(‘input‘).not("input[type=‘password‘]").each( 6 function() { 7 var self = $(this); 8 var val = self.attr("placeholder"); 9 input(self, val); 10 } 11 ); 12 13 /** 14 * 对password框的特殊处理 15 * 1.创建一个text框 16 * 2.获取焦点和失去焦点的时候切换 17 */ 18 $(‘input[type="password"]‘).each( 19 function() { 20 var pwdField = $(this); 21 var pwdVal = pwdField.attr(‘placeholder‘); 22 var pwdId = pwdField.attr(‘id‘); 23 // 重命名该input的id为原id后跟1 24 pwdField.after(‘<input id="‘ + pwdId +‘1" type="text" value=‘+pwdVal+‘ autocomplete="off" />‘); 25 var pwdPlaceholder = $(‘#‘ + pwdId + ‘1‘); 26 pwdPlaceholder.show(); 27 pwdField.hide(); 28 29 pwdPlaceholder.focus(function(){ 30 pwdPlaceholder.hide(); 31 pwdField.show(); 32 pwdField.focus(); 33 }); 34 35 pwdField.blur(function(){ 36 if(pwdField.val() == ‘‘) { 37 pwdPlaceholder.show(); 38 pwdField.hide(); 39 } 40 }); 41 } 42 ); 43 } 44 }); 45 46 // 判断浏览器是否支持placeholder属性 47 function isSupportPlaceholder() { 48 var input = document.createElement(‘input‘); 49 return ‘placeholder‘ in input; 50 } 51 52 // jQuery替换placeholder的处理 53 function input(obj, val) { 54 var $input = obj; 55 var val = val; 56 $input.attr({value:val}); 57 $input.focus(function() { 58 if ($input.val() == val) { 59 $(this).attr({value:""}); 60 } 61 }).blur(function() { 62 if ($input.val() == "") { 63 $(this).attr({value:val}); 64 } 65 }); 66 }
关于input标签和placeholder在IE8，9下的兼容问题
标签：改变 兼容 attr html self ace val ie10 方式
原文地址：http://www.cnblogs.com/2010master/p/6194291.html
