Placeholder, inputplaceholder

Placeholder, inputplaceholder

Html:

 

<Div> 1 supportPlaceholder = 'placeholder' in document. createElement ('input'), 2 placeholder = function (input) {3 var text = input. attr ('placeholder '), defaultValue = input. defaultValue; 4 if (! DefaultValue) {5 input. val (text ). addClass ("phcolor"); 6} 7 input. focus (function () {8 if (input. val () = text) {9 $ (this ). val (""); 10} 11}) 12 input. blur (function () {13 if (input. val () = "") {14 $ (this ). val (text ). addClass ("phcolor"); 15} 16}) 17 18 // The input character is not gray 19 input. keydown (function () {20 $ (this ). removeClass ("phcolor"); 21}); 22} 23 24 // call the placeholder function 25 if (! SupportPlaceholder) {26 $ ('input '). each (function () {27 text = $ (this ). attr ("placeholder"); 28 if ($ (this ). attr ("type") = "text") {29 placeholder ($ (this); 30} 31}) 32}

 

Solve input [type = 'Password']

 1 (function($){ 2     var Placeholder, 3         inputHolder = 'placeholder' in document.createElement('input'), 4     Placeholder = { 5         ini:function () { 6             if (inputHolder) { 7                 return false; 8             } 9             this.el = $(':password[placeholder]');10             this.setHolders();11         },12         setHolders: function(obj){13             var el = obj ? $(obj) : this.el;14             if (el) {15                 var self = this;16                 el.each(function() {17                     var span = $('<label />');18                     span.text( $(this).attr('placeholder') );19                     span.css({20                         color: '#999',21                         fontSize: "15px",22                         fontFamily: $(this).css('fontFamily'),23                         position: 'absolute',24                         top: $(this).offset().top + $(this).css("marginTop"),25                         left: ( parseInt($(this).offset().left) + 30 + parseInt( $(this).css("marginLeft").replace(/px/g,"") ) ) + "px",26                         width: $(this).width(),27                         height: $(this).height(),28                         lineHeight: $(this).height() + 'px',29                         textIndent: $(this).css('textIndent'),30                         paddingLeft: $(this).css('borderLeftWidth'),31                         paddingTop: $(this).css('borderTopWidth'),32                         paddingRight: $(this).css('borderRightWidth'),33                         paddingBottom: $(this).css('borderBottomWidth'),34                         display: 'inline',35                         overflow: 'hidden'36                     })37                     if (!$(this).attr('id')) {38                         $(this).attr('id', self.guid());39                     }40                     span.attr('for', $(this).attr('id'));41                     $(this).after(span);42                     self.setListen(this, span);43                 })44             }45         },46         setListen : function(el, holder) {47             if (!inputHolder || !textareaHolder) {48                 el = $(el);49                 el.bind('keydown', function(e){50                         if (el.val() != '') {51                             holder.hide(0);52                         } else if ( /[a-zA-Z0-9`~!@#\$%\^&\*\(\)_+-=\[\]\{\};:'"\|\\,.\/\?<>]/.test(String.fromCharCode(e.keyCode)) ) {53                             holder.hide(0);54                         } else {55                             holder.show(0);56                         }57                 });58                 el.bind('keyup', function(e){59                         if (el.val() != '') {60                             holder.hide(0);61                         } else {62                             holder.show(0);63                         }64 65                 });66                 el.on("focus",function(e){67                     if(el.val()==""){68                         holder.hide(0);69                     }70                 });71                 el.on("blur",function(e){72                     if(el.val()==""){73                         holder.show(0);74                     } 75                 });76             }77         },78         guid: function() {79             return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {80                 var r = Math.random()*16| 0,81                     v = c == 'x' ? r : (r&0x3|0x8);82                 return v.toString(16);83             }).toUpperCase();84         }85         86     }87 88     $.fn.placeholder = function () {89         if (inputHolder && textareaHolder) {90             return this;91         }92         Placeholder.setListen(this);93         return this;94     }95 96     $.placeholder = Placeholder;97 98 })(jQuery)