JQuery plug-in that implements the placeholder effect across browsers, placeholderjquery

JQuery plug-in that implements the placeholder effect across browsers, placeholderjquery

Once encountered such a problem, handling IE8 Password box placeholder attribute compatibility. After several twists and turns, this solution can solve the problem.

1. Introduce js plug-ins to jsp pages

<script type="text/javascript" src="<%=basePath%>/login.js" ></script>

2. Page initialization code

<Script type = "text/javascript"> // The input prompt information effect plug-in processes ie8 $ (function () {if (! ('Holder' in document. createElement ('input') {$ ('# password '). placeholder ({isUseSpan: true}) ;}}); </script>

3. Page tag code

<Input id = "password" name = "j_password" class = "input_text input_open" placeholder = "enter the password" type = "password">

4. Plug-in placeholder. js

/*** JQuery EnPlaceholder plug * jQuery plug-in implementing the placeholder effect across browsers * version 1.0 *} * /// var defaultValue = "Account"; (function ($) {$. fn. extend ({"placeholder": function (options) {options = $. extend ({placeholderColor: '# BABABA', // # ACA899 isUseSpan: false, // whether to use the insert span label to simulate the placeholder mode. The default value is false. The default value is onInput: true // use label simulation (isUseSpan is true), whether to bind the onInput event to replace the focus/blur event}, options); $ (this ). each (fu Nction () {var _ this = this; var supportPlaceholder = 'holder' in document. createElement ('input'); if (! SupportPlaceholder) {var defaultValue = $ (_ this). attr ('placeholder'); // when no placeholder is found, the undefined question if (defaultValue! = Null & typeof (defaultValue )! = "Undefined") {var defaultColor = optional (_this).css ('color'); if (options. isUseSpan = false) {$ (_ this ). focus (function () {var pattern = new RegExp ("^" + defaultValue + "$ | ^ $"); pattern. test ($ (_ this ). val () & amp; #95; this(.val(''0000.css ('color', defaultColor );}). blur (function () {if ($ (_ this ). val () = defaultValue) {values (_this).css ('color', defaultColor);} else if ($ (_ this ). val (). length = 0) {$ (_ this ). v Al(defavalue0000.css ('color', options. placeholderColor );}}). trigger ('blur');} else {var $ imitate =$ ('<span class = "wrap-placeholder">); restore imitate.css ({'margin-left ': ((_this).css ('margin-left'), 'margin-top': $(_this).css ('margin-top'), 'font-size': $(_this).css ('font-size '), 'font-family ': Fill (_this).css ('font-family'), 'font-westight ': Fill (_this).css ('font-westight'), 'padding-left': parseint({(_this}.css ('Padding-left') + 2 + 'pxy', 'Line-height': _ this. nodeName. toLowerCase () = 'texta '? Detail (_this).css ('line-weight '): $ (_ this ). outerHeight () + 'px ', 'padding-top': _ this. nodeName. toLowerCase () = 'textea '? Parseint(((_this).css ('padding-top ') + 2: 0}); $ (_ this ). before ($ imitate. click (function () {$ (_ this ). trigger ('focal ') ;}); $ (_ this ). val (). length! = 0 & $ imitate. hide (); if (options. onInput) {// bind oninput/onpropertychange event var inputChangeEvent = typeof (_ this. oninput) = 'object '? 'Input': 'propertychang'; $ (_ this ). bind (inputChangeEvent, function () {$ imitate [0]. style. display = $ (_ this ). val (). length! = 0? 'None': 'inline-Block';});} else {$ (_ this ). focus (function () {$ imitate. hide ();}). blur (function () {/^ $ /. test ($ (_ this ). val () & $ imitate. show () ;}}}}); return this ;}}) ;}( jQuery );

5. GAME OVER