Original Web front-end development--let IE 7 8 support placeholder Properties

Today, when I was writing a page, when testing a low-version browser, I found that the placeholder displayed in input was blank, so I deliberately wrote a popular trial method to allow this property to be supported by a low-version browser.

Bo Master built a technology sharing QQ group:164858883, because the number is still relatively small, active is not very high, I hope to have the same ideas, and I am interested in technology sharing technology house, rich tease than the spirit of the program Ape can join together to explore and share, together to create greater progress. Of course, the sister paper program Ape is more popular yo. ^_^

In general, we will solve this problem using the following method.

1 <  onfocus= "if (value = = ' Click Text disappears ') {value = '} ' onblur=" if (value = = ') {value= ') Click the text disappears '} '/>

This is a particularly cumbersome implementation, and the user experience is not good. And each input has to be added, so the code looks like a lump of shit.

Let the entire page support the placeholder property, just need to add the placeholder attribute in input, this is the kingly. No nonsense, do not understand the addition of QQ group. directly on the code.

　　

1   /**2 * Created by Steven3 * @author [email protected]4    */5$ (document). Ready (function(){6 7$ (': input '). each (function(key,val) {8       if(typeof($( This). attr (' placeholder '))! = ' undefined '){9         varPlaceholder = $ (val). attr (' placeholder ');//Get ID PropertyTen$( This). CSS (' color ', ' #999 '); One$( This). val (placeholder); A  -$( This). Focus (function(){ -           if($( This). val () = =placeholder) { the$( This). Val ('); -$( This). CSS (' color ', ' Inherit '); -           } -         }); +  -$( This). Blur (function(){ +           if($( This). val () = = "){ A$( This). val (placeholder); at$( This). CSS (' color ', ' #999 '); -}Else{ -$( This). CSS (' color ', ' Inherit '); -           } -         }); -       } in     }); -});

Iterate through all input elements, add focus and blur events, and change the font color at any time based on user input, so the user experience is better. However, there is a bug that will have no effect when verifying that the form is empty. The solution I'm giving now is to judge that its value is not equal to the value of placeholder. The code is as follows:

　　

1  if ($ (' #name '). val () = = "| | $ (' #name '). val () = = = $ (' #name '). attr (' placeholder '){2         layer.tips (' Cannot be empty ', ' #name ', {3           tips: [1, ' #f66200 '],4           time:40005         }); 6         return false ; 7 8       }

Well, in fact $ (' #name '). val () = = "is equivalent to a nonsense."         haha haha .... ^_^ PS: Welcome Dabigatran Spit Groove.

Original works, reproduced please retain the original text, indicating the source. Http://zhutty.cnblogs.com

Original Web front-end development--let IE 7 8 support placeholder Properties