Let Placeholder dry up in IE, placeholderie up

Let Placeholder dry up in IE, placeholderie up

There are a lot of articles on the Internet to solve the compatibility problem in this aspect, many tricks, learn this trick, let you easily solve the compatibility of Placeholder, let me good people, take it away, thank you ....

The placeholder attribute is added for input in HTML5. A placeholder is provided on input to display the hint of the expected value of the input field in text format. This field is displayed when the input is empty.

For example

<Input type = "text" id = "Title" class = "so-input-d w270" placeholder = "Enter the Title"/>

Like placeholder, but IE6 7 8 9 does not support it. It is blank! At this moment, the mood must be a dog !!!!!, For web development, compatibility must be considered and the industry needs to be conscientious ....

Before use:

After use:

The curative effect is not average.

Current browser support:

Browser	IE6/24/60/9	IE10 +	Firefox	Chrome	Safari
Supported?	NO	YES	YES	YES	YES

 

 

Below is a Js file code, which roughly solves the problem:

(Function ($) {$. fn. myPlaceholder = function (options) {var defaults = {pColor: "# acacac", pFont: "16px", posL: 8, zIndex: "99"}, opts = $. extend (true, defaults, options); if ("placeholder" in document. createElement ("input") return; return this. each (function () {// condition (this).parent().css ("position", "relative"); var isIE = $. browser. msie, version = $. browser. version; // do not support the placeholder browser var $ this = $ (this), msg = $ this. attr ("placeholder"), iH = $ this. outerHeight (), iW = $ this. outerWidth (), iX = $ this. offset (). left, iY = $ this. offset (). top, oInput = $ ("<label>", {"text": msg, "css": {"position": "absolute", "left ": iX + "px", "top": iY + "px", "width": iW-opts. posL + "px", "padding-left": opts. posL + "px", "height": iH + "px", "line-height": iH + "px", "color": opts. pColor, "font-size": opts. pFont, "z-index": opts. zIndex, "cursor": "text "}}). insertBefore ($ this); // content in the initial state var value = $ this. val (); if (value. length> 0) {oInput. hide () ;}; var myEvent; if (isIE & version <9) {myEvent = "propertychange" ;}else {myEvent = "input" ;}$ this. bind (myEvent, function () {var value = $ (this ). val (); if (value. length> 0) {oInput. hide ();} else {oInput. show () ;}}); oInput. click (function () {$ this. trigger ("focus") ;}) ;}} (jQuery );

This solution is implemented using JQUERY plug-ins!

On the page or Js file for operations, use the following method:

$ (Function (){
$ ("# Title"). myPlaceholder ();
});

The Placeholder compatibility problem is solved (ensure that the ID is consistent when the article is marked red )!

Hurry up and get dry!