placeholder在非标准(IE)浏览器的实现

题目写得好拗口啊:)

placeholder是HTML5的一个新特性,今天在考虑如何提示表单输入内容格式的时候,左思右想还是把提示内容放在input中最好。刚开始还不知道有placeholder这个东西,想要找一些js实现同样的效果,不久就发现原来HTML5中有placeholder这个标签属性,恰好支持这种效果。

高兴了没有一会,万恶的IE就把我拉回了现实。

方法就是比问题要多,找了N多用JS实现的placeholder的效果,最后发现一个相对完美的实现。

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// HTML5 placeholder plugin version 1.01
// Copyright (c) 2010-The End of Time, Mike Taylor, http://miketaylr.com
// MIT Licensed: http://www.opensource.org/licenses/mit-license.php
//
// Enables cross-browser HTML5 placeholder for inputs, by first testing
// for a native implementation before building one.
//
//
// USAGE:
//$('input[placeholder]').placeholder();

// <input type="text" placeholder="username">
(function($){
  //feature detection
  var hasPlaceholder = 'placeholder' in document.createElement('input');
 
  //sniffy sniff sniff -- just to give extra left padding for the older
  //graphics for type=email and type=url
  var isOldOpera = $.browser.opera && $.browser.version < 10.5;

  $.fn.placeholder = function(options) {
    //merge in passed in options, if any
    var options = $.extend({}, $.fn.placeholder.defaults, options),
    //cache the original 'left' value, for use by Opera later
    o_left = options.placeholderCSS.left;
 
    //first test for native placeholder support before continuing
    //feature detection inspired by ye olde jquery 1.4 hawtness, with paul irish
    return (hasPlaceholder) ? this : this.each(function() {
      //TODO: if this element already has a placeholder, exit
   
      //local vars
      var $this = $(this),
          inputVal = $.trim($this.val()),
          inputWidth = $this.width(),
          inputHeight = $this.height(),

          //grab the inputs id for the <label @for>, or make a new one from the Date
          inputId = (this.id) ? this.id : 'placeholder' + (+new Date()),
          placeholderText = $this.attr('placeholder'),
          placeholder = $('<label for='+ inputId +'>'+ placeholderText + '</label>');
       
          //stuff in some calculated values into the placeholderCSS object
          options.placeholderCSS['width'] = inputWidth;
          options.placeholderCSS['height'] = inputHeight;

          // adjust position of placeholder
          options.placeholderCSS.left = (isOldOpera && (this.type == 'email' || this.type == 'url')) ?
            '11%' : o_left;
          placeholder.css(options.placeholderCSS);
   
      //place the placeholder
      $this.wrap(options.inputWrapper);
      $this.attr('id', inputId).after(placeholder);
     
      //if the input isn't empty
      if (inputVal){
        placeholder.hide();
      };
   
      //hide placeholder on focus
      $this.focus(function(){
        if (!$.trim($this.val())){
          placeholder.hide();
        };
      });
   
      //show placeholder if the input is empty
      $this.blur(function(){
        if (!$.trim($this.val())){
          placeholder.show();
        };
      });
    });
  };
 
  //expose defaults
  $.fn.placeholder.defaults = {
    //you can pass in a custom wrapper
    inputWrapper: '<span style="position:relative"></span>',
 
    //more or less just emulating what webkit does here
    //tweak to your hearts content
    placeholderCSS: {
      'font':'0.75em sans-serif',
      'color':'#bababa',
      'position': 'absolute',
      'left':'5px',
      'top':'3px',
      'overflow-x': 'hidden'
    }
  };
})(jQuery);

源码:https://github.com/miketaylr/jQuery-html5-placeholder/blob/master/html5placeholder.jquery.js

1 thought on “placeholder在非标准(IE)浏览器的实现

  1. Pingback引用通告: Web开发资源站 | Swind's Blog

评论已关闭。