The following JS file is referenced in HTML and is written in the style file: Input,textarea{color: #999;} Input:focus,textarea:focus{color: #333;}
I am simply using the global style to write this, if you do not want all input boxes are prompted, you can give the required input specific classes, such as:. txt{color: #999;} . Txt:focus{color: #333;}
(function ($) {
/** * Spoofs placeholders in browsers this don ' t support them (eg Firefox 3) * * Copyright (Dan Bentley) * License D under the Apache License 2.0 * * Author:dan Bentley [Github.com/danbentley] */
Return If native support is available. if ("Placeholder" in document.createelement ("input")) return;
$ (document). Ready (function () {$ (': Input[placeholder] '). \ (':p assword '). each (function () {Setupplaceholder ($ () )); });
$ (':p Assword[placeholder] '). each (function () {Setuppasswords ($ (this)); }); $ (' form '). Submit (function (e) {Clearplaceholdersbeforesubmit ($ (this)); }); });
function Setupplaceholder (input) {
var placeholdertext = input.attr (' placeholder ');
Setplaceholderorflagchanged (input, placeholdertext); Input.focus (function (e) {if (Input.data (' changed ') = = = True) return; if (input.val () = = = Placeholdertext) input.val ("); }). blur (function (e) {if (input.val () = = =) Input.val (placeholdertext); }). Change (function (e) {input.data (' changed ', Input.val ()!== '); }); }
function setplaceholderorflagchanged (input, text) {(Input.val () = = = ")? Input.val (text): Input.data (' changed ', true); }
function Setuppasswords (input) {var passwordplaceholder = Createpasswordplaceholder (input); Input.after (Passwordplaceholder);
(Input.val () = = = ")? Input.hide (): Passwordplaceholder.hide ();
$ (input). blur (function (e) {if (Input.val ()!== ") return; Input.hide (); Passwordplaceholder.show (); }); $ (Passwordplaceholder). focus (function (e) {input.show (). focus (); Passwordplaceholder.hide (); }); }
function Createpasswordplaceholder (input) {return $ (' <input> '). attr ({placeholder:input.attr (' placeholder '), Value:input.attr (' placeholder '), id:input.attr (' id '), readonly:true}). addclass (input.attr (' class ')); }
function Clearplaceholdersbeforesubmit (form) {Form.find (': Input[placeholder] '). each (function () {if ($ (). Data (' Changed ') = = = True) return; if ($ (this). val () = = = $ (this). attr (' placeholder ')) $ (this). Val ('); }); }}) (JQuery);
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Placeholder's IE compatibility issues
