(ii) Add HTML5 new attribute to input in IE6-IE9-placeholder

It is also a minor problem that has recently been encountered. The placeholder property is not supported because IE9 is the following input. Find a solution on the internet and take it decisively. As Mr. Lu Xun said, ' Take doctrine ': Use the brain, give out your eyes, take it yourself! Thank. Jiehuaxianfo here to share under the record.

The usage is simple, introduce placeholder.js in the code, and add the following piece of code to the line.

1<script src="Jquery-1.11.3.js"></script>2<!--IE8-IE6 support HTML5 placeholder new attribute introduction script and corresponding function code--3<script src="Placeholder.js"></script>4<script>5 //enable IE8-IE6 to support HTML5 placeholder new properties6 $ (function () {7         varSupport =(function (input) {8             returnfunction (attr) {returnattrinchinput}9}) (Document.createelement ('input'))Ten         if( ! (Support ('placeholder') &&$.browser.webkit)) { One$('Input[placeholder],textarea[placeholder]'). Placeholder ({ AUsenative:false, -Hideonfocus:false, - style: { theTextshadow:'None' -                 } -             }); -         } +  -         if(!support ('Autofocus') ) { +$('Input[autofocus]'). Focus () A         } at});

The source code of Placeholder.js is as follows:

1 (function ($) {2     varattr ='placeholder', nativesupported = attrinchDocument.createelement ('input')3 4$.fn.placeholder =function (options) {5         return  This. each (function () {6             var$input = $ ( This)7 8             if(typeofoptions = = ='string' ) {9Options ={text:options}Ten             } One  A             varopt =$.extend ({ -Text:"', - style: {}, the                 namespace:'placeholder', -Usenative:true, -Hideonfocus:true -}, Options | | {}) +  -             if( !opt.text) { +Opt.text =$input. attr (attr) A             } at  -             if(!opt.usenative) { - $input. Removeattr (attr) -}Else if(nativesupported) { -                  - $input. attr (attr, Opt.text) in                 return -             } to  +             varwidth = $input. Width (), height =$input. Height () -             varBox_style = ['margintop','marginleft','paddingtop','paddingleft','paddingright'] the  *             varShow =function () {$layer. Show ()} $             varHide =function () {$layer. Hide ()}Panax Notoginseng             varIs_empty = function () {return!$input. Val ()} -             varCheck = function () {Is_empty ()?Show (): Hide ()} the  +             varPosition =function () { A                 varpos =$input. Position () the                 if(!opt.hideonfocus) { +                      -Pos.left + =2 $                 } $ $layer. CSS (POS) - $.each (Box_style, function (i, name) { - $layer. CSS (name, $input. CSS (name)) the                 }) -             }Wuyi  the             varLayer_style = { -Color:'Gray', WuCursor:'text', -TextAlign:' Left', AboutPosition:'Absolute', $FontSize: $input. CSS ('fontSize'), -fontFamily: $input. CSS ('fontFamily'), -Display:is_empty ()?'Block':'None' -             } A  +             the             varLayer_props = { - Text:opt.text, $ Width:width, theHeight'Auto' the             } the  the          -             varNS ='.'+ Opt.namespace, $layer = $input. Data ('Layer'+NS) in             if(!$layer) { the$input. Data ('Layer'+ NS, $layer = $ ('<div>', Layer_props). AppendTo ($input. offsetParent ())) the             } About  the           the $layer the . CSS ($.extend (Layer_style, Opt.style)) +. Unbind ('Click'+NS) -. Bind ('Click'+NS, function () { theOpt.hideonfocus &&Hide ()Bayi $input. Focus () the                 }) the  - $input - . Unbind (NS) the. Bind ('Blur'+NS, check) the  the             if(opt.hideonfocus) { the$input. Bind ('Focus'+ns, hide) -}Else{ the$input. Bind ('keypress KeyDown'+NS, function (e) { the                     varKey =E.keycode the                     if(E.charcode | | (Key >= $&& Key <= -)) {94 Hide () the                     } the                 }) the. Bind ('KeyUp'+Ns,check)98             } About  -            101             102$input.Get(0). Onpropertychange =Check103 104 position () the Check ()106         })107     }108 109}) (JQuery)

Sometimes, there is no need to make all the clear, impossible and unnecessary. It's better to focus on the more appropriate, more meaningful, and more rewarding place for yourself.

(ii) Add HTML5 new attribute to input in IE6-IE9-placeholder