https://borda.ru/js/placeholder.js

1/*
2* Placeholder plugin for jQuery
3* ---
4* Copyright 2010, Daniel Stocks (http://webcloud.se)
5* Released under the MIT, BSD, and GPL Licenses.
6*/
7(function($) {
8    function Placeholder(input) {
9        this.input = input;
10        if (input.attr('type') == 'password') {
11            this.handlePassword();
12        }
13        // Prevent placeholder values from submitting
14        $(input[0].form).submit(function() {
15            if (input.hasClass('placeholder') && input[0].value == input.attr('placeholder')) {
16                input[0].value = '';
17            }
18        });
19    }
20    Placeholder.prototype = {
21        show : function(loading) {
22            // FF and IE saves values when you refresh the page. If the user refreshes the page with
23            // the placeholders showing they will be the default values and the input fields won't be empty.
24            if (this.input[0].value === '' || (loading && this.valueIsPlaceholder())) {
25                if (this.isPassword) {
26                    try {
27                        this.input[0].setAttribute('type', 'text');
28                    } catch (e) {
29                        this.input.before(this.fakePassword.show()).hide();
30                    }
31                }
32                this.input.addClass('placeholder');
33                this.input[0].value = this.input.attr('placeholder');
34            }
35        },
36        hide : function() {
37            if (this.valueIsPlaceholder() && this.input.hasClass('placeholder')) {
38                this.input.removeClass('placeholder');
39                this.input[0].value = '';
40                if (this.isPassword) {
41                    try {
42                        this.input[0].setAttribute('type', 'password');
43                    } catch (e) { }
44                    // Restore focus for Opera and IE
45                    this.input.show();
46                    this.input[0].focus();
47                }
48            }
49        },
50        valueIsPlaceholder : function() {
51            return this.input[0].value == this.input.attr('placeholder');
52        },
53        handlePassword: function() {
54            var input = this.input;
55            input.attr('realType', 'password');
56            this.isPassword = true;
57            // IE < 9 doesn't allow changing the type of password inputs
58            if ($.browser.msie && input[0].outerHTML) {
59                var fakeHTML = $(input[0].outerHTML.replace(/type=(['"])?password\1/gi, 'type=$1text$1'));
60                this.fakePassword = fakeHTML.val(input.attr('placeholder')).addClass('placeholder').focus(function() {
61                    input.trigger('focus');
62                    $(this).hide();
63                });
64                $(input[0].form).submit(function() {
65                    fakeHTML.remove();
66                    input.show()
67                });
68            }
69        }
70    };
71    var NATIVE_SUPPORT = !!("placeholder" in document.createElement( "input" ));
72    $.fn.placeholder = function() {
73        return NATIVE_SUPPORT ? this : this.each(function() {
74            var input = $(this);
75            var placeholder = new Placeholder(input);
76            placeholder.show(true);
77            input.focus(function() {
78                placeholder.hide();
79            });
80            input.blur(function() {
81                placeholder.show(false);
82            });
83
84            // On page refresh, IE doesn't re-populate user input
85            // until the window.onload event is fired.
86            if ($.browser.msie) {
87                $(window).load(function() {
88                    if(input.val()) {
89                        input.removeClass("placeholder");
90                    }
91                    placeholder.show(true);
92                });
93                // What's even worse, the text cursor disappears
94                // when tabbing between text inputs, here's a fix
95                input.focus(function() {
96                    if(this.value == "") {
97                        var range = this.createTextRange();
98                        range.collapse(true);
99                        range.moveStart('character', 0);
100                        range.select();
101                    }
102                });
103            }
104        });
105    }
106})(jQuery);