IE8 incompatible with the placeholder property of input but the way to achieve its effect

By learning the ideas of predecessors, personal thoughts are organized as follows:

1. Create placeholder content with two element tags
2. Use position to position two element tags.
3. First to hide two element tags display:none, in <!--[if GTE IE 8]><! [endif]--> set the style style to Display:inline-block
4. Use the JS control effect to control the display of two element tags by giving the page a point-and-click event and using the target object to make judgments:

• Click on the object is the element tag, the current click on the object is hidden, to determine whether the other input box value is empty, whether to hide the display of the second element label
• Click on the object when the input box, the current input box element tag hidden, determine whether the other input box value is empty, whether to hide the second element label
• Click on other objects to determine whether the values of all input boxes are empty, show or hide two element tags

The HTML code is as follows:

<div>
<div class= "Account_img" >
    <div class= "Ion-person-stalker" ></div>
</div>
<input id= "Accounts" name= "account" type= "text" value= "placeholder=" username "class=" "Valid" >
    <span class= "Show_placeholder" id= "Span1" >username account </span>
</div>

<div>
    <div class= "Password_img" >
        <div class= "FA Fa-key" ></div>
    </div>
<input data-val= "true" data-val-required= "please fill in user password" id= "Password" name= "Password" type= "Password" placeholder= " Password Password ">
    <span class= "Show_placeholder" id= "span2" >password password </span>
</div>

CSS code slightly

The JS code is as follows:

<!--[ifGTE IE8]><script type="Text/javascript">$ (document). Click (function (e) {varE = e | | Window.Event; vartarget = E.srcelement | |E.target; if(Target.id = ='Span1') {controll_input1 (); $('#Account'). focus (); } Else if(Target.id = ='span2') {controll_input2 (); $('#Password'). focus (); }Else if(target.id==" Account") {controll_input1 (); }Else if(target.id=="Password") {controll_input2 (); }Else{            if($('#Account'). val () = ="") {                $('#span1'). Show (); }            if($('#Password'). val () = ="") {                $('#span2'). Show ();    }        }    }); function Controll_input1 () {$ ('#span1'). Hide (); if($('#Password'). val () = ="") {            $('#span2'). Show (); }} function Controll_input2 () {$ ('#span2'). Hide (); if($('#Account'). val () = ="") {            $('#span1'). Show (); }    }</script><style>. show_placeholder {display:inline-Block; }</style><! [endif]-->

IE8 incompatible with the placeholder property of input but the way to achieve its effect