https://www.maff.go.jp/e/shared_new/shared/js/jquery.ah-placeholder.js

1/*
2 * jQuery ah-placeholder plugin 1.2
3 *
4 * https://github.com/ahomu/jquery.ah-placeholder
5 * http://havelog.ayumusato.com/develop/javascript/e189-jquery-plugin-placeholder.html
6 *
7 * Copyright (c) 2011 Ayumu Sato ( http://havelog.ayumusato.com )
8 *
9 * Dual licensed under the MIT and GPL licenses:
10 *   http://www.opensource.org/licenses/mit-license.php
11 *   http://www.gnu.org/licenses/gpl.html
12 */
13(function($) {
14
15$.fn.ahPlaceholder = function(options)
16{
17    // property
18    var defaults = {
19            placeholderColor : 'silver',
20            placeholderAttr  : 'title',
21            likeApple        : false
22        },
23        settings = $.extend({}, defaults, options);
24
25    var ngCode  = [
26            ' ',  // --------------
27            '0',  // ???
28            '9',  // tab
29            '16', // shift
30            '17', // ctrl
31            '32', // space
32            '27', // esc
33            '37', // left
34            '38', // up
35            '39', // right
36            '40', // down
37            '91', // Cmd(L), Win(L)
38            '92', // Win(R)
39            '93', // Cmd(R)
40            '112',// F1
41            '113',// F2
42            '114',// F3
43            '115',// F4
44            '116',// F5
45            '117',// F6
46            '118',// F7
47            '119',// F8
48            '120',// F9
49            '121',// F10
50            '122',// F11
51            '123',// F12
52            ' '   // ---------------
53        ].join('@'),
54        keyCatch = (function(){
55            if ( document.all ) {
56                return function(e){return e.keyCode;};
57            } else if ( document.getElementById ) {
58                return function(e){return (e.keyCode)? e.keyCode: e.charCode;};
59            } else if ( document.layers ) {
60                return function(e){return e.which;};
61            }
62        })();
63
64    // method
65    var init    = function()
66        {
67            // placeholderが有効なら処理を必要としないので終了
68            if ( settings.placeholderAttr === 'placeholder' && ('placeholder' in document.createElement('input')) ) {
69                return;
70            }
71
72            $.data(this, 'placeholder-string', $(this).attr(settings.placeholderAttr));
73            $.data(this, 'placeholder-color', $(this).css('color'));
74
75            var phString    = $.data(this, 'placeholder-string'),
76                self        = this,
77                $self       = $(this);
78
79            if ( self.value === '' ) {
80                self.value = phString;
81                $self.css('color', settings.placeholderColor);
82            }
83
84            if ( settings.likeApple === true ) {
85                $self.bind('mousedown', moveCursorToHead);
86                $self.bind('keydown', onKeydown);
87                $self.bind('keyup', resetPlaceholder);
88            } else {
89                $self.bind('focus', onFocus);
90                $self.bind('blur', resetPlaceholder);
91            }
92
93            $self.closest('form').submit(function() {
94                if ( self.value === $.data(self, 'placeholder-string')
95                     && $self.css('color') === $('<div/>').css('color', settings.placeholderColor).css('color')) {
96                         self.value = '';
97                }
98                return true;
99            });
100        },
101        onKeydown = function(e)
102        {
103            if ( this.value === $.data(this, 'placeholder-string') ) {
104                var key = keyCatch(e);
105
106                if ( ngCode.indexOf('@'+key+'@') !== -1 ) {
107                    // tabの入力は認める
108                    return ( key === 9 );
109                } else {
110                    _clearPlaceholder(this);
111                }
112            }
113        },
114        onFocus = function()
115        {
116            if ( this.value === $.data(this, 'placeholder-string') ) {
117                _clearPlaceholder(this);
118            }
119        },
120        resetPlaceholder = function(e)
121        {
122            if ( this.value === '' ) {
123                _setPlaceholder(this);
124
125                if ( e.type === 'keyup' ) {
126                    moveCursorToHead.apply(this);
127                }
128            }
129        },
130        moveCursorToHead = function()
131        {
132            if ( this.value === $.data(this, 'placeholder-string') ) {
133                $(this).focus();
134                if ( this.createTextRange ) {
135                    var range = this.createTextRange();
136                    range.collapse();
137                    range.moveEnd('character', 0);
138                    range.moveStart('character', 0);
139                    setTimeout(function() {
140                        range.select();
141                    }, 17);
142                }
143                else if ( this.setSelectionRange ) {
144                    this.setSelectionRange(0, 0);
145                }
146                return false;

147            }
148        },
149        _setPlaceholder = function(self)
150        {
151            self.value = $.data(self, 'placeholder-string');
152            $(self).css('color', settings.placeholderColor);
153        },
154        _clearPlaceholder = function(self)
155        {
156            self.value = '';
157            $(self).css('color', $.data(self, 'placeholder-color'));
158        };
159    // construct
160    this.each(function()
161    {
162        init.apply(this);
163    });
164
165    return this;
166};
167})(jQuery);