diff --git a/media/js/libs/jquery.placeholder.js b/media/js/libs/jquery.placeholder.js new file mode 100644 index 000000000..6c105ad59 --- /dev/null +++ b/media/js/libs/jquery.placeholder.js @@ -0,0 +1,107 @@ +// https://github.com/danielstocks/jQuery-Placeholder +/* +* 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); diff --git a/media/js/main.js b/media/js/main.js index 16079c258..d006a3955 100644 --- a/media/js/main.js +++ b/media/js/main.js @@ -26,7 +26,7 @@ k = {}; $('div.editor-tools').remove(); } - $('input[placeholder]').autoPlaceholderText(); + $('input[placeholder]').placeholder(); initAutoSubmitSelects(); initSearchAutoFilters(); @@ -170,48 +170,3 @@ k = {}; } $(document).ready(removeMessagesList); })(); - - -/** - * Handles autofill of text with default value for browsers that don't - * support the HTML5 `placeholder` functionality. - * - * When an input field is empty, the default value (from `placeholder` - * attribute) will be set on blur. Then, when focused, the value will - * be set to empty. - * - */ -jQuery.fn.autoPlaceholderText = function () { - - // check for html5 placeholder support and fallback to js solution - if (!Modernizr.input.placeholder) { - - function onFocus() { - var $this = $(this); - if ($this.val() === $this.attr('placeholder')) { - $this.val('').addClass('placeholder-focused'); - } - } - - function onBlur() { - var $this = $(this); - if ($this.val() === '') { - $this.val($this.attr('placeholder')).removeClass('placeholder-focused'); - } - } - - this.each(function () { - var $this = $(this); - var placeholder = $this.attr('placeholder'); - if (placeholder) { - if (!$this.val() || $this.val() === placeholder) { - $this.val(placeholder).addClass('input-placeholder'); - } - $this.focus(onFocus).blur(onBlur); - } - }); - - } - - return this; -}; diff --git a/settings.py b/settings.py index 7c056ee86..e15cf7600 100644 --- a/settings.py +++ b/settings.py @@ -387,6 +387,7 @@ MINIFY_BUNDLES = { 'js/libs/jquery.min.js', 'js/libs/modernizr-1.7.js', 'js/libs/jquery.cookie.js', + 'js/libs/jquery.placeholder.js', 'js/kbox.js', 'global/menu.js', 'js/main.js',