Because some browsers do not support placeholder, a jquery plugin is written to simulate the placeholder effect.
Method of Use: $ ("#IDName"). placeholder ();
Words don't say much, directly on the code ~ ~ ~
(function ($) { $.fn.placeholder = function (options) { var defaults = { pColor: "#BEBEBE", pActive: "#999", pFont: "14px", activeborder: "#080", posl: 8 , zindex: " " }, opts = $.extend ( defaults, options); $ (". Test"). Remove (); &nbsP;return this.each (function () { if ("placeholder" in document.createelement ("input") return; $ (This). Parent (). CSS ("position", "relative") ;// var isie = $. browser.msie,// version = $. Browser.version; if (!$ (This). Is (": Hidden ")) {//placeholder browser not supported var $this = $ (this), msg = $this. attr ("placeholder"), ih = $ This.outerheight (), iW = $this. Outerwidth (), iX = $this. Position (). left, iY = $this. Position () .top, oinput = $ ("<label>", { "class": "test", "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" } &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP,}). InsertBefore ($this); //initial state there is content var value = $this. Val (); if (value.length > 0) { oinput.hide (); }; $this. On ("Focus", function () { oinput.hide (); &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;OINPUT.CSS ("Color", opts.pactive); }). On ("Blur", function () { var value = $ (This). Val (); if (value.length == 0) { &nbSP;&NBSP;&NBSP;OINPUT.CSS ("Color", opts.pcolor). Show (); } }); oinput.on ("click", function () { $this. Trigger ("Focus"); $ (this). CSS ("color", opts.pactive); }); $this. Filter (": Focus"). Trigger ("focus"); } }); } ;}) (JQuery);
JS Analog Placeholder Effect 1