Placeholder attribute of Html5 (IE compatible)

Placeholder attribute of Html5 (IE compatible)

HTML5 has made many enhancements to Web Form, such as the type and Form Validation added by 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: Id = "t1" type = "text" placeholder = "Enter text "/ >

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!
   
Bytes ---------------------------------------------------------------------------------------------------------------------------
   
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 ~!