Html5 placeholder Property (ie compatible) implementation code _jquery

HTML5 has done a lot of enhancements to the Web Form, such as input type, Form validation, and so on.

Placeholder is another new property HTML5, when the input or textarea set the property, the content of the value will appear as a gray prompt in the text box, when the text box gets the focus, the prompt text disappears. In the past to achieve this effect is to use JavaScript to control to achieve, Firefox, Google Chrome, etc. to its support, only IE exist Shong sense Ah!

For example: <input id= "T1" type= "text" placeholder= "Please enter text"/>

This paper introduces an ultra strong property plugin that allows IE to support placeholder, and 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 (input.value=== ') {
   This.value=text}}}
 ;
 
 if (!supportplaceholder) {
  for (Var i=0,len=inputs.length;i<len;i++) {
   var input=inputs[i],
   text= Input.getattribute (' placeholder ');
   if (input.type=== ' text ' &&text) {
    placeholder (input)}}}}
 );

Directly copy the code down, save into a JS file reference can not do any processing, super convenient!

Ex: This does make IE's input display placeholder properties, but if there is only one input on the page is OK, if it is multiple input, if the input did not fill in any value, Then its empty input automatically fills in the value of the placeholder, resulting in an error. For example:

<input type= "text" placeholder= "Input commodity Encoding" name= "Goodscode" id= "Goodscode" value= "123"/> <input type= "
text "Placeholder=" Enter the product name "Name=" Goodsname "id=" Goodsname "value=" "Enter the product name"/>

The solution is in the background of their own judgment, perhaps in the above JS file to solve, and then study the ~!