Enable IE to support placeholder

In the project, the input and textarea labels need to use prompts. At the beginning, values are used for simulation. Although this effect can be achieved, each event is bound with the onblur and onfocus events, in this way, verification is troublesome when data is submitted, and the input text is better. If you lose the focus, you can use defaultvalue. textarea will be in trouble and there is no defaultvalue attribute.

No defaultvalue is a trivial matter. jquery is used in our project. if the validationengine verification framework is used for verification, the value cannot be used to simulate the prompt. Therefore, you simply need to find an online placeholder plug-in to implement the prompt and get it to the project, yes. Run it and check that although it can be used, it still cannot achieve the desired effect (compatible effect: as long as the focus is obtained, the prompt disappears). Firefox disappears only when oninput is used by default, I just want to change the code of that plug-in. Nima, I don't understand, Google... I have seen a blog post about developing jquery plug-ins, which has benefited a lot. I would like to recommend this article to kids shoes that are not yet available. The address is: Ghost.

Most of the above are dumbys, but it is still very useful for the jquery plug-in developed by our little cainiao in the blog post. I will not mention it. The placeholder plug-in code supported by IE is as follows:

　　

/*** Compatible with placeholder. If the browser is unable to implement placeholder, the span label is used by default to simulate the prompt * usage: Write the placeholder attribute on the label, if the label is textarea, you need to write a maxwidth attribute (the shortest length is prompted) * cjw * Time: September 27, 2014 15:44:38 **/; $ (function ($) {$. FN. placeholder = function (optons) {var settings = $. extend ({placeholdercolortoother: "#444", // The text color displayed in Firefox: placeholdercolortoie: "# 9a9a9a", // ie indicates the text color oninputhide: false // use the placeholder effect that supports the placeholder browser. Hide the prompt. The default value is false}, optons); return this. each (function (I, OBJ) {var iscan = "Placeholder" in document. createelement ("input"); If (iscan) {// You can // load a color if ($ (OBJ ). val () = "" Getting started successfully (obj).css ("color", settings. placeholdercolortoother);} else variables (obj).css ("color", "#000"); // black} If (! Settings. oninputhide) {var tempplaceholder = ""; $ (OBJ ). focus (function () {tempplaceholder = $ (OBJ ). ATTR ("Placeholder" without authorization (this%.css ("color", "#000 "). ATTR ("Placeholder ","");}). blur (function () {if ($ (OBJ ). val () = "" Too many characters (this..css ("color", settings. placeholdercolortoother ). ATTR ("Placeholder", tempplaceholder) ;}}}} else {// if not, use a simulated span to implement setspan (OBJ );}}); // simulate the span tag function setspan (OBJ) {var placeholderstr = $ (OBJ ). ATTR ("Placeholder"); // style and parameter var textalign = inline (obj).css ("text-align"); var display = "inline-block "; if ($ (OBJ ). val ()! = "") {Display = "NONE";} var width = $ (OBJ ). width (); If (obj. tagname = "textarea") {width = $ (OBJ ). ATTR ("maxwidth");} var Height = $ (OBJ) [0]. tagname = "textarea "? Objects (obj).css ("line-weight"): $ (OBJ ). outerheight (); var tempspan = $ ('<SPAN class = "Wrap-Placeholder" style = "position: absolute; text-align:' + textalign + '; display: '+ display +'; overflow: hidden; color: '+ settings. placeholdercolortoie + '; width:' + width + 'px; Height: '+ height + 'px; "> '+ placeholderstr +' </span> 'margin margin tempspan.css ({" margin-left ": margin (obj).css (" margin-left ")," margin-top ": ((obj).css ("margin-top"), "font-size ": ((Obj).css ("font-size"), "font-Family": ((obj).css ("font-Family"), "font-weight": $(obj).css ("font-weight "), "padding-left": parseint(parts (obj).css ("padding-left") + 2 + "PX", "line-height": $ (OBJ) [0]. tagname = "textarea "? Objects (obj).css ("line-weight"): $ (OBJ ). outerheight () + "PX", "padding-top": $ (OBJ) [0]. tagname = "textarea "? Parseint(((obj).css ("padding-top") + 2: 0, "Min-width": Fill (obj).css ("Min-width")}); $ (OBJ ). before (tempspan. click (function () {// determine whether to perform the corresponding operation. If obj is unavailable, if ($ (OBJ) is not executed ). is (": enabled") {$ (OBJ ). trigger ("Focus") ;}}); If (settings. oninputhide) {$ (OBJ ). on ("input", function () {tempspan. hide ();}). blur (function () {if ($ (OBJ ). val () = "") {tempspan. show () ;}) ;}else {$ (OBJ ). focus (function () {tempspan. hide ();}). blur (function () {if ($ (OBJ ). val () = "") {tempspan. show () ;}}}}}( jquery); // enable placeholder $ (function () {$ ("[placeholder]"). placeholder ();});

The code is very simple. It is difficult to understand how jquery plug-in is not developed. When I first saw this writing method, the parameters were not very understandable.

　　

Enable IE to support placeholder