Cross-browser HTML5 placeholder text (placeholder) Solution

ArticleDirectory

• Traditional Solution
• Jqueyr placeholder text
• Remove WebKit search box style

A very good extension function in HTML5 is to add placeholder text on the text box. Placeholder refers to the prompt text displayed when a text box is not focused. It is blank after being clicked. This function is good, but not all browsers support it. This article will discuss how to use a simple method to make all browsers support this feature.

Here is an example
Download

Traditional Solution

Before we have this attribute, we generally use JavaScript to achieve this effect. This text is set in the Value Attribute. After focusing, check whether the value of the text box is equal to the default value. If so, clear the text box. When the text box loses focus, check whether it is empty. If it is empty, write the default value. This method is not efficient, and each text box has to be checked.

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

Jqueyr placeholder text

Now with HTML5, setting through the placeholder attribute is much more semantic than setting the value. However, this attribute is not supported by all browsers, so we need the support of jquery and modernizr.

Here, modernizr is used to check whether the browser supports some HTML5 attributes. If the browser does not support this function, run jquery again.Code. It first finds all the elements with the placeholder attribute and stores them in a variable. Then, the value of the element is compared with this variable. If it is null, the content in placeholder is displayed, and a "Placeholder" CSS style is added.

If you want to use this item on your website, you need to introduce jquery and modernizr. Place it in the appropriate path and copy the following code.

1234567891011121314151617181920212223242526272829303132

< Script SRC = "Jquery. js" > </ Script > < Script SRC = "Modernizr. js" > </ 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 kernel browser adds some extra styles to the search box. You can remove this style using the following CSS:

12345678

Input[Type=Search] {-WebKit-appearance: None;}Input[Type="Search"]::-WebKit-search-Decoration,Input[Type="Search"]::-WebKit-search-cancel-button{Display: None;}

Reprinted Please note:
Author: rockux-Web Front-end
From: cross-browser HTML5 placeholder text (placeholder) Solution