How to compatible placeholder on IE

First, determine whether the browser supports the placeholder property:

var input = document.createelement (' input '); if inch input) {    alert (' Support ');} Else {    alert (' not supported ');}

(1) If you only need to allow browsers that do not support placeholder to support the change function, and do not require the browser to support native placeholder to behave consistently, you can use the following methods:

Placeholder in low-version browsers that do not support HTML5, the placeholder property is invalid, and non-modern browsers (such as IE6-IE9) do not support placeholder properties.

 functionplaceholder (nodes,pcolor) {if(Nodes.length &&!) ("Placeholder"inchdocument_createelement_x ("Input"))){           for(i=0; IvarSelf =Nodes[i], placeholder= Self.getattribute (' placeholder ') | | ‘‘; Self.onfocus=function(){                  if(Self.value = =placeholder) {Self.value= ' '; Self.style.color= ""; }} Self.onblur=function(){                  if(Self.value = = "") {Self.value=placeholder; Self.style.color=Pcolor; }} Self.value=placeholder; Self.style.color=Pcolor; }      }    }    

(2) If you need to customize the style, and want to placeholder in all browsers, you can use the label tag to simulate a placeholder style placed on the input box, when the input box gets focus, hide the label, when the input box loses focus, Displays the label. Or to apply a background image on input, to toggle whether the background image is displayed when you get and lose focus.

<script>$ (function() {    $ ('. For_text '). Click (function() {        $ ('. Text '). focus ()    })    $ ('. Text '). blur (function() {        $ ('. For_text '). Hide ();})    }) </script><style>. for_text{position:absolute; cursor:text; margin:5px; color:#999;}. text{padding:5px;} for = "text" class= "For_text" > Please enter text </label><input type= "text" name= "text" class= "text"/> </form>

(3) jquery solution:

JQuery (' [placeholder] '). Focus (function() {  varinput = JQuery ( This); if(Input.val () = = input.attr (' placeholder ')) {input.val (‘‘); Input.removeclass (' Placeholder '); }}). blur (function() {  varinput = JQuery ( This); if(Input.val () = = "| | input.val () = = input.attr (' placeholder ') {Input.addclass (' Placeholder '); Input.val (Input.attr (' Placeholder ')); }}). blur (). Parents (' form '). Submit (function() {JQuery ( This). Find (' [placeholder] '). each (function() {    varinput = JQuery ( This); if(Input.val () = = input.attr (' placeholder ')) {input.val (‘‘); }  })});

(4) The last method, but also use the most common, but can not change the color of the text, using a script to determine the value of the text box, to get focus or input text, if it is a preset value, then empty the text box, lose focus, if the value of the text box is empty, then replace with our preset value.

<type= " text" name= "text"  value= "Please enter text" class = "text" onfocus = "if (this.value== ' please enter text ') This.value = '" OnBlur = "if (this.value== ') this.value= ' Please enter text '" />

Expand:

Want to change the color of placeholder text, do not want to change the color of the input text. The correct wording is as follows:

::-moz-placeholder {color:red;}               //firefox::-webkit-input-placeholder{color:red;}      //chrome,safari:-ms-input-placeholder{color:red;}           //ie10

How to compatible placeholder on IE