There are many articles on the internet to solve the compatibility problem, many moves, learn this trick, let you easy to deal with the compatibility of placeholder, call me a good person, take away, thanks ....
The placeholder property is added for input in HTML5. Provides a placeholder on input that displays the prompt information for the expected value of the input field (hint), which is displayed when the input is empty.
Such as
<input type= "text" id= "title" class= "so-input-d w270" placeholder= "Please enter title"/>
Like with placeholder just good, but IE6 7 8 9 does not support Ah, a blank! At this moment the mood must be the dog!!!!! , to engage in web development must consider compatibility, industry conscience needs ....
Before use:
After use:
The effect is not general, after use Meng Meng da.
Current browser support situation:
Browser |
Ie6/7/8/9 |
ie10+ |
Firefox |
Chrome |
Safari |
is supported |
NO |
YES |
YES |
YES |
YES |
Below to share a JS file code, simple rough to solve the problem:
(function ($) {$.fn.myplaceholder = function (options) {var defaults = {pcolor: "#acacac", Pfont: "16px", Posl:8, ZIndex: "" ", opts = $.extend (True, defaults, options); if ("Placeholder" in document.createelement ("input")) return; Return This.each (function () {//$ (this). Parent (). CSS ("position", "relative"); var Isie = $.browser.msie, Version = $.browser.version; Browsers that do not support placeholder 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": I Y + "px", "width": Iw-opts.posl + "px", "padding-left": Opts.posl + "px", "Height": ih + "px", "line-height": IH + "px", "Color": Opts.pcol Or, "font-size": Opts.pfont, "Z-index": Opts.zindex, "Cursor": "Text"}). InsertBefore ($this); The initial state has content 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 is the use of jquery plug-in thinking of the solution!
In the page or the operation of the JS file only with such a gentle to engage:
$ (function () {
$ ("#Title"). Myplaceholder ();
});
Placeholder compatibility problem solved (the article is marked Red Place Note ID consistent)!
Seize the limited time, dry up!
Let the placeholder in IE dry up