Html5 placeholder attribute (IE compatible) implementation code _ jquery

Source: Internet
Author: User
Placeholder is another new attribute of html5. when this attribute is set in input or textarea, the content of this value will be displayed as a gray prompt in the text box. When the text box gets the focus, the prompt text disappears. In the past, JavaScript was used to control this effect. firefox, googlechrome, and so on indicate their support, but IE does not support HTML5 and has made many enhancements to Web forms, for example, type and Form Validation added to input.

Placeholder is another new attribute of html5. when this attribute is set in input or textarea, the content of this value will be displayed as a gray prompt in the text box. When the text box gets the focus, the prompt text disappears. In the past, JavaScript was used to control this effect. firefox, google chrome, and so on showed support for it. Internet Explorer alone had a sense of violation!

For example:

This article introduces a powerful attribute plug-in that allows IE to support placeholder. It is also compatible with other browsers that do not support placeholder. The Code is as follows:

$ (Document ). ready (function () {var doc = document, inputs = doc. getElementsByTagName ('input'), supportPlaceholder = 'placeholder' in doc. createElement ('input'), placeholder = function (input) {var text = input. getAttribute ('placeholder '), defaultValue = input. defaultValue; if (defaultValue = '') {input. value = text} input. onfocus = function () {if (input. value = text) {this. value = ''}; input. onblur = function () {if (Indium Ut. value = '') {this. value = text }}; if (! SupportPlaceholder) {for (var I = 0, len = inputs. length; I
 
  

Directly copy the code and save it as a js file reference. It is super convenient without any further processing!

Ex: This does make IE's Input display the placeholder attribute, but if there is only one input on the page, if there are multiple inputs, if the input is not filled with any value, then its null input will automatically fill in the value of placeholder into the value, resulting in an error. for example:


  

The solution is to make your own judgment in the background. You may be able to solve the problem in the above js file. I will study it later ~!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.