placeholder compatibility issues and using label instead of placeholder

What is placeholder?

A: A new attribute in HTML5, used in form elements, specifies a short hint that describes the expected value of an input field, which is the reserved text in the form element. Applies to the following input types: text, search, URL, tel, email, and password, and also for textarea elements.

What are the compatibility issues with placeholder?

A: 1, placeholder in IE9 and the previous browser can not be supported

2. In Chrome and Firefox, when the input box gets the focus, the placeholder text is still in, and only disappears after input is entered, and in IE and Safari, Placeholder text disappears when the input box gets the focus

3, by default, placeholder text is gray, when you set the color to input, in Chrome and Safari, the text color of placeholder, and in Firefox and IE, The color of the placeholder text becomes the value of color

4, when want to placeholder the text and input content in input box is centered, the simple method is to set Text-align:center, but in some browsers (now I found that Samsung mobile phone comes with the browser), After setting the placeholder text is still left

These questions are explained below:

1, placeholder in the IE9 and the previous browser can not be supported

I'm not going to make it until I do.

2. In Chrome and Firefox, when the input box gets the focus, the placeholder text is still in, and only disappears after input is entered, and in IE and Safari, Placeholder text disappears when the input box gets the focus

This is because there is not much impact, so do not consider, if you really want to behave in all browsers, then use my label substitution method

　　3, by default, placeholder text is gray, when you set the color to input, in Chrome and Safari, the text color of placeholder, and in Firefox and IE, The color of the placeholder text becomes the value of color

You can set a color for placeholder text individually, and you will not affect the placeholder after you set the colors for input.

1 ::-moz-placeholder {color:#999;}                  //firefox2::-webkit-input-placeholder{color:#999;}       //chrome and Safari3:-ms-input-placeholder{color:#999 ;}             //ie10

　　4, when want to placeholder the text and input content in input box is centered, the simple method is to set Text-align:center, but in some browsers (now I found that Samsung mobile phone comes with the browser), After setting the placeholder text is still left

Here I wrote a label instead of placeholder demo, can solve all of the above problems, post code

1 <DivID= "Inputplaceholder">2     <inputtype= "text"value=""ID= "InputBox"onfocus= "onfocus ()"onblur= "OnBlur ()"AutoComplete= "Off">3     <label for= "InputBox"ID= "Labelplaceholder">Please enter a number</label>4 </Div>

1 functiononfocus () {2document.getElementById ("Labelplaceholder"). style.display= "None"; When input gets the focus, the label hides3     }4 functionOnBlur () {5         if(document.getElementById ("InputBox"). value== "") {6document.getElementById ("Labelplaceholder"). Style.display= "Block"; When input loses focus, the label is hidden if there is content in the input box, and if there is no content, the label is displayed7}Else{8document.getElementById ("Labelplaceholder"). style.display= "None";9         };Ten          One}

1 #inputPlaceholder{2 width:100%;3 Height:Auto;4 position:relative;5}6 #inputBox{7 width:100%;8 Height:30px;9 Line-height:30px;Ten Border:1px #DBEAF9 Solid; One Border-radius:5px; A Background-color:#fff; - text-align:Center; - font-size:14px; the padding:0; - margin:0; - Color:#333; -} + #labelPlaceholder{ - width:100%; + Height:32px; A Line-height:32px; at Color:#999; - font-size:14px; - position:Absolute; - Top:0; -  Left:0; - padding:0; in margin:0; - text-align:Center; to} + ::-moz-placeholder{Color:#999;} - ::-webkit-input-placeholder{Color:#999;} the :-ms-input-placeholder{Color:#999;}

That's it

If there is an error or insufficient, please correct me.

placeholder compatibility issues and using label instead of placeholder