In page design, the form design needs prompt words to guide users. The most common is to use the<input>tag placeholder attribute. Unfortunately, this HTML 5 attribute will fail in the lower version of IE. What should we do?

Let's first learn about placeholder

The placeholder property provides a hint that describes the expected value of the input field. The prompt will be displayed when the input field is empty, and will disappear when the field gets the focus.

For example:

 <form action="xxx.php" method="get"> <input type="search" name="username" placeholder="username"/> </form>

When users use the form, they will see prompts such as "user name". When users click the input box, the prompt text disappears, which is very practical. However, this effect will fail in IE. If there are multiple input boxes, there is no prompt text, which is very unfriendly to users.

You only need to use the following js code to resolve the invalidation of the placeholder attribute in IE.

 <script type="text/javascript"> ; (function($){ $.fn.placeholder = function(options){ var opts = $.extend({}, $.fn.placeholder.defaults, options); var isIE = document.all ? true : false; return this.each(function(){ var _this = this, placeholderValue =_this.getAttribute("placeholder"); // Cache the default placeholder value if(isIE){ _this.setAttribute("value",placeholderValue); _this.onfocus = function(){ $.trim(_this.value) == placeholderValue ? _ this.value = "" : ''; }; _this.onblur = function(){ $.trim(_this.value) == "" ? _ this.value = placeholderValue : ''; }; } }); }; })(jQuery); </script>

Then set the elements that need to support this function.

 <script type="text/javascript"> $("input").placeholder(); </script>

be careful: This code is based on the jquery library, so please import the jquery library file before use.