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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.