关于input标签和placeholder在IE8,9下的兼容问题

时间:2022-12-01 16:54:43

 一、

  input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移动端的项目中。

 

  二、

  IE10+浏览器下,input标签会有一个默认的样式,比如文本框的‘×’号,密码框的小眼睛。初衷是好的,有时候很方便,但有时候我们会自己设置样式和功能。可以用伪元素方法去除: 

::-ms-clear, ::-ms-reveal{display: none;}

 

  三、

  在低版本的IE下,input中的文字位置会改变(偏上显示),解决方法:(思路: 设置input的高度=行高)

关于input标签和placeholder在IE8,9下的兼容问题
input {
height: 60px;
line-height: 60px;
margin: 0;
padding: 0;
outline: none;
}
关于input标签和placeholder在IE8,9下的兼容问题

  

  四、

  实际中,我们会在input的前面用label标签或其他,提示input的内容信息。在IE下,在获得焦点、失去焦点时,label标签里的文字会出现抖动问题。解决方法:(设置input的显示方式为行内块)

input {
display: inline-block;
}

 

  

  五、

  ##placeholder是H5的一个新属性,但是在IE9以下是不支持的,为此我们会封装一个函数进行能力检测。

  参考地址:http://www.studyofnet.com/news/1022.html

  ###以下是代码部分:

关于input标签和placeholder在IE8,9下的兼容问题
 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下的兼容问题