Html5 placeholder attribute (IE compatible), html5placeholder

Html5 placeholder attribute (IE compatible), html5placeholder

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:<InputId = "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(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 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:

<Input type = "text" placeholder = "input commodity code" name = "goodscode" id = "goodscode" value = "123"/> <input type = "text" placeholder = "Enter product name" name = "goodsname" id = "goodsname" value = "Enter product name"/>

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

When IE8 and IE9 use the clone method, the placeholder attribute values used by html5 cannot be cleared.

How to improve and standardize Fengtai?
 
How to achieve the default value of html text, similar to the hint Effect of android, do not use javascript, I remember that input has that attribute

The specific attribute name is placeholder, which is a new attribute of html5. This attribute must be supported by the browser. For example, if the browser under ie9 sets this attribute, it will not work.

See www.w3school.com.cn/html5/tag_input.asp
Www.w3school.com.cn/..er.asp