| /* |
| * Placeholder plugin for jQuery |
| * --- |
| * Copyright 2010, Daniel Stocks (http://webcloud.se) |
| * Released under the MIT, BSD, and GPL Licenses. |
| */ |
| (function($) { |
| function Placeholder(input) { |
| this.input = input; |
| if (input.attr('type') == 'password') { |
| this.handlePassword(); |
| } |
| // Prevent placeholder values from submitting |
| $(input[0].form).submit(function() { |
| if (input.hasClass('placeholder') && input[0].value == input.attr('placeholder')) { |
| input[0].value = ''; |
| } |
| }); |
| } |
| Placeholder.prototype = { |
| show : function(loading) { |
| // FF and IE saves values when you refresh the page. If the user refreshes the page with |
| // the placeholders showing they will be the default values and the input fields won't be empty. |
| if (this.input[0].value === '' || (loading && this.valueIsPlaceholder())) { |
| if (this.isPassword) { |
| try { |
| this.input[0].setAttribute('type', 'text'); |
| } catch (e) { |
| this.input.before(this.fakePassword.show()).hide(); |
| } |
| } |
| this.input.addClass('placeholder'); |
| this.input[0].value = this.input.attr('placeholder'); |
| } |
| }, |
| hide : function() { |
| if (this.valueIsPlaceholder() && this.input.hasClass('placeholder')) { |
| this.input.removeClass('placeholder'); |
| this.input[0].value = ''; |
| if (this.isPassword) { |
| try { |
| this.input[0].setAttribute('type', 'password'); |
| } catch (e) { } |
| // Restore focus for Opera and IE |
| this.input.show(); |
| this.input[0].focus(); |
| } |
| } |
| }, |
| valueIsPlaceholder : function() { |
| return this.input[0].value == this.input.attr('placeholder'); |
| }, |
| handlePassword: function() { |
| var input = this.input; |
| input.attr('realType', 'password'); |
| this.isPassword = true; |
| // IE < 9 doesn't allow changing the type of password inputs |
| if ($.browser.msie && input[0].outerHTML) { |
| var fakeHTML = $(input[0].outerHTML.replace(/type=(['"])?password\1/gi, 'type=$1text$1')); |
| this.fakePassword = fakeHTML.val(input.attr('placeholder')).addClass('placeholder').focus(function() { |
| input.trigger('focus'); |
| $(this).hide(); |
| }); |
| $(input[0].form).submit(function() { |
| fakeHTML.remove(); |
| input.show(); |
| }); |
| } |
| } |
| }; |
| var NATIVE_SUPPORT = !!("placeholder" in document.createElement( "input" )); |
| $.fn.placeholder = function() { |
| return NATIVE_SUPPORT ? this : this.each(function() { |
| var input = $(this); |
| var placeholder = new Placeholder(input); |
| placeholder.show(true); |
| input.focus(function() { |
| placeholder.hide(); |
| }); |
| input.blur(function() { |
| placeholder.show(false); |
| }); |
| |
| // On page refresh, IE doesn't re-populate user input |
| // until the window.onload event is fired. |
| if ($.browser.msie) { |
| $(window).load(function() { |
| if(input.val()) { |
| input.removeClass("placeholder"); |
| } |
| placeholder.show(true); |
| }); |
| // What's even worse, the text cursor disappears |
| // when tabbing between text inputs, here's a fix |
| input.focus(function() { |
| if(this.value == "") { |
| var range = this.createTextRange(); |
| range.collapse(true); |
| range.moveStart('character', 0); |
| range.select(); |
| } |
| }); |
| } |
| }); |
| }; |
| })(jQuery); |