HTML5 practice-implement a cross-browser HTML5 text placeholder-placeholder

ArticleDirectory

• Previously implemented using JavaScript
• Use jquery to generate placeholders
• Remove WebKit search box style

Reprinted please specify original address: http://www.cnblogs.com/softlover/archive/2012/11/20/2779878.html

HTML5 enhances a function for web form forms, which is the placeholder of input --Placeholder. The placeholder is used to display the placeholder content when the input content is empty or not focused. This is a great feature, but not all browsers support it. This tutorial introduces how to useThe modernizr class library determines whether the browser supports this attribute, and then uses jquery to dynamically display placeholders.

Demo preview: http://webdesignerwall.com/demo/html5-placeholder-text/

Demo: http://webdesignerwall.com/file/html5-placeholder.zip

 

Previously implemented using JavaScript

InDuring the days of the placeholder attribute, we use JavaScript to simulate its implementation. In the following example, we add a value attribute to input. When the input is focused, we determine whether the value is 'search'. If yes, the content is cleared. When the input loses focus, we determine whether the content is empty. If it is null, the value is set to 'search '.

<InputType= "Text"Value= "Search"Onfocus= "If (this. value = 'search') {This. value = '';}" 
Onblur= "If (this. value ='') {This. value = 'search ';}"/>
 

 

Use jquery to generate placeholders

Now we use the placeholder of html5. in terms of semantics, it can better express our intent than the value attribute. But not all browsers support this attribute, so we need to use modernizrAndJquery to help us.

Modernizr is used to determine whether the browser supports the placeholder attribute. If not, run the jquery statement. He will find all the HTML elements that contain the placeholder attribute and store it in the variable. When the element gets or loses focus, the script determines the value and placeholder value to determine the final content of the value.

If you want to use this function on your site, you need to downloadModernizr and jquery class libraries, and ensure that their reference addresses are correct.

<SCRIPT src = "jquery. js"> </SCRIPT> <SCRIPT src = "modernizr. js"> </SCRIPT> <SCRIPT> $ (Document). Ready (  Function  (){  If (! Modernizr. Input. placeholder) {$ ( '[Placeholder]'). Focus ( Function  (){  VaR Input = $ ( This  );  If (Input. Val () = input. ATTR ('placeholder' ) {Input. Val ( '' ); Input. removeclass ( 'Placeholder' ) ;}}). Blur (  Function  (){  VaR Input = $ ( This  );  If (Input. Val () = ''| input. Val () = input. ATTR ('placeholder' ) {Input. addclass ( 'Placeholder' ); Input. Val (input. ATTR ( 'Placeholder') ;}}). Blur ();
$ ( '[Placeholder]'). Parents ('form'). Submit ( Function  () {$ (  This ). Find ('[placeholder]'). Each ( Function  (){  VaR Input = $ ( This  );  If (Input. Val () = input. ATTR ('placeholder' ) {Input. Val ( '' );}})});} </SCRIPT>

 

Remove WebKit search box style

The WebKit browser adds an extra style to the search box. We need to use the following script to remove it.

 
Input [type = search]{-WebKit-appearance:None;}Input [type = "Search"]:-WebKit-search-decoration, input [type = "Search"]:-WebKit-search-cancel-button{Display:None;}
 

Well, this course ends here.

 

Address: http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

 

HTML5 practice series