1、html
input經常使用在表單的輸入,包括text,password,H5後又新增了許多type屬性值,如url, email, member等等,考慮到非現代瀏覽器的兼容性問題,這些新的type經常使用在移動端的項目中。瀏覽器
2、ide
IE10+瀏覽器下,input標籤會有一個默認的樣式,好比文本框的‘×’號,密碼框的小眼睛。初衷是好的,有時候很方便,但有時候咱們會本身設置樣式和功能。能夠用僞元素方法去除: 函數
::-ms-clear, ::-ms-reveal{display: none;}
3、this
在低版本的IE下,input中的文字位置會改變(偏上顯示),解決方法:(思路: 設置input的高度=行高)url
input { height: 60px; line-height: 60px; margin: 0; padding: 0; outline: none; }
4、spa
實際中,咱們會在input的前面用label標籤或其餘,提示input的內容信息。在IE下,在得到焦點、失去焦點時,label標籤裏的文字會出現抖動問題。解決方法:(設置input的顯示方式爲行內塊)code
input { display: inline-block; }
5、htm
##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 }