About compatibility issues with input tags and placeholder under ie8,9

One

Input is commonly used in forms, including Text,password,h5, with many new type attribute values, such as URLs, emails, member, etc., which are commonly used in mobile projects, given the compatibility issues of non-modern browsers.

Two

ie10+ Browser, the input tag will have a default style, such as the ' X ' of the text box, the small eyes of the password box. The original intention is good, sometimes very convenient, but sometimes we will set the style and function ourselves. can be removed with pseudo-element methods:

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

Three

In the lower version of IE, the text position in input will change (on display), the workaround: (Idea: Set the height of input = row height)

{    height: 60px;     line-height: 60px;     margin: 0;     padding: 0;     outline: none;}

　　

Four

In practice, we will prompt the content information of input with a label tag or other in front of input. Under IE, the text in the label tag has a jitter problem when it gets focus and loses focus. WORKAROUND: (Set input to display in inline block)

{  display: inline-block;      }

　　

Five

# #placeholder是H5的一个新属性, but below IE9 is not supported, so we encapsulate a function for capability detection.

Reference Address: http://www.studyofnet.com/news/1022.html

# # #以下是代码部分:

1$(function() {2     //If placeholder is not supported, use jquery to complete3     if(!Issupportplaceholder ()) {4         //traverse all input objects except the Password box5$ (' input '). Not ("input[type= ' password ')"). each (6             function() {7                 varSelf = $ ( This);8                 varval = self.attr ("placeholder");9 input (self, val);Ten             } One         ); A  -         /** - * Special handling of the password box the * 1. Create a text box - * 2. Switch when getting focus and losing focus -          */ -$ (' input[type= ' password "] '). each ( +             function() { -                 varPwdfield = $ ( This); +                 varPwdval = pwdfield.attr (' placeholder ')); A                 varPwdid = pwdfield.attr (' id ')); at                 //Rename the input ID as the original ID followed by 1 -Pwdfield.after (' <input id= ' + pwdid + ' 1 "type=" text "value= ' +pwdval+ ' autocomplete=" Off "/> '); -                 varPwdplaceholder = $ (' # ' + pwdid + ' 1 ')); - pwdplaceholder.show (); - pwdfield.hide (); -  inPwdplaceholder.focus (function(){ - pwdplaceholder.hide (); to pwdfield.show (); + Pwdfield.focus (); -                 }); the  *Pwdfield.blur (function(){ $                     if(Pwdfield.val () = = ") {Panax Notoginseng pwdplaceholder.show (); - pwdfield.hide (); the                     } +                 }); A             } the         ); +     } - }); $  $ //determine if the browser supports the placeholder property - functionIssupportplaceholder () { -     varinput = document.createelement (' input '); the     return' Placeholder 'inchinput; - }Wuyi  the //the handling of jquery replacement placeholder - functioninput (obj, Val) { Wu     var$input =obj; -     varval =Val; About $input. attr ({value:val}); $$input. Focus (function() { -         if($input. val () = =val) { -$( This). attr ({value: "")}); -         } A}). blur (function() { +         if($input. val () = = "") { the$( This). attr ({value:val}); -         } $     }); the}

About compatibility issues with input tags and placeholder under ie8,9