(二)IE 6-IE 9のinputにHTML 5の新しい属性-placeholderを追加する

同じように最近出会った小さな問題です.IE 9以下のinputではplaceholder属性はサポートされていないためです.ネットで解決策を見つけて、思い切って持って行きました.魯迅先生が言った「拿来主義」のように、脳髄を運用し、目を出して、自分で取りに来ます.感謝します.花を借りて仏を捧げてここで分かち合うことを記録します.
使い方は簡単で、コードにplaceholderを導入します.js、後のコードを加えればいいです.

 1 <script src="jquery-1.11.3.js"></script>
 2 <!--IE8-IE6  html5 placeholder               -->
 3 <script src="placeholder.js"></script>
 4 <script>
 5 //     IE8-IE6  html5 placeholder   
 6     $(function(){
 7         var support = (function(input) {
 8             return function(attr) { return attr in input }
 9         })(document.createElement('input'))
10         if ( !(support('placeholder') && $.browser.webkit) ) {
11             $('input[placeholder],textarea[placeholder]').placeholder({
12                 useNative: false,
13                 hideOnFocus: false,
14                 style: {
15                     textShadow: 'none'
16                 }
17             });
18         }
19 
20         if ( !support('autofocus') ) {
21             $('input[autofocus]').focus()
22         }
23     });

ここでplaceholder.jsのソースコードは以下の通りです.

  1 (function ($) {
  2     var attr = 'placeholder', nativeSupported = attr in document.createElement('input')
  3 
  4     $.fn.placeholder = function (options) {
  5         return this.each(function () {
  6             var $input = $(this)
  7 
  8             if ( typeof options === 'string' ) {
  9                 options = { text: options }
 10             }
 11 
 12             var opt = $.extend({
 13                 text     : '',
 14                 style    : {},
 15                 namespace: 'placeholder',
 16                 useNative: true,
 17                 hideOnFocus: true
 18             }, options || {})
 19 
 20             if ( !opt.text ) {
 21                 opt.text = $input.attr(attr)
 22             }
 23 
 24             if (!opt.useNative) {
 25                 $input.removeAttr(attr)
 26             }else if ( nativeSupported ) {
 27                 
 28                 $input.attr(attr, opt.text)
 29                 return
 30             }
 31 
 32             var width     = $input.width(), height = $input.height()
 33             var box_style = ['marginTop', 'marginLeft', 'paddingTop', 'paddingLeft', 'paddingRight']
 34 
 35             var show      = function () { $layer.show() }
 36             var hide      = function () { $layer.hide() }
 37             var is_empty  = function () { return !$input.val() }
 38             var check     = function () { is_empty() ? show() : hide() }
 39 
 40             var position  = function () {
 41                 var pos = $input.position()
 42                 if (!opt.hideOnFocus) {
 43                     
 44                     pos.left += 2
 45                 }
 46                 $layer.css(pos)
 47                 $.each(box_style, function (i, name) {
 48                     $layer.css(name, $input.css(name))
 49                 })
 50             }
 51 
 52             var layer_style = {
 53                 color     : 'gray',
 54                 cursor    : 'text',
 55                 textAlign : 'left',
 56                 position  : 'absolute',
 57                 fontSize  : $input.css('fontSize'),
 58                 fontFamily: $input.css('fontFamily'),
 59                 display   : is_empty() ? 'block' : 'none'
 60             }
 61 
 62            
 63             var layer_props = {
 64                 text  : opt.text,
 65                 width : width,
 66                 height: 'auto'
 67             }
 68 
 69         
 70             var ns = '.' + opt.namespace, $layer = $input.data('layer' + ns)
 71             if (!$layer) {
 72                 $input.data('layer' + ns, $layer = $('<div>', layer_props).appendTo($input.offsetParent()) )
 73             }
 74 
 75          
 76             $layer
 77                 .css($.extend(layer_style, opt.style))
 78                 .unbind('click' + ns)
 79                 .bind('click' + ns, function () {
 80                     opt.hideOnFocus && hide()
 81                     $input.focus()
 82                 })
 83 
 84             $input
 85                 .unbind(ns)
 86                 .bind('blur' + ns, check)
 87 
 88             if (opt.hideOnFocus) {
 89                 $input.bind('focus' + ns, hide)
 90             }else{
 91                 $input.bind('keypress keydown' + ns, function(e) {
 92                     var key = e.keyCode
 93                     if (e.charCode || (key >= 65 && key <=90)) {
 94                         hide()
 95                     }
 96                 })
 97                     .bind('keyup' + ns,check)
 98             }
 99 
100            101             
102             $input.get(0).onpropertychange = check
103 
104             position()
105             check()
106         })
107     }
108 
109 })(jQuery)

时には、すべてをはっきりさせる必要はありません.必要もありません.自分にとってより適切で意味のある価値のある場所に集中しなければならない.