From 9e2c949d86bb56afa37a4c952f8e8930b7c9958e Mon Sep 17 00:00:00 2001 From: thomascube Date: Thu, 15 Mar 2012 21:55:22 +0000 Subject: Improve input field placeholders: use native attributes if supported, encapsulate in jquery plugin --- program/js/app.js | 20 +------------------- program/js/common.js | 39 +++++++++++++++++++++++++++++++++++---- 2 files changed, 36 insertions(+), 23 deletions(-) (limited to 'program') diff --git a/program/js/app.js b/program/js/app.js index b2cb1c0c1..94e48a823 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -4505,9 +4505,7 @@ function rcube_webmail() if (!elem) elem = $('.ff_' + col); - elem.focus(function(){ ref.focus_textfield(this); }) - .blur(function(){ ref.blur_textfield(this); }) - .each(function(){ this._placeholder = this.title = (ref.env.coltypes[col].label || ''); ref.blur_textfield(this); }); + elem.placeholder(ref.env.coltypes[col].label); }; this.insert_edit_field = function(col, section, menu) @@ -5424,22 +5422,6 @@ function rcube_webmail() } }; - this.focus_textfield = function(elem) - { - elem._hasfocus = true; - var $elem = $(elem); - if ($elem.hasClass('placeholder') || $elem.val() == elem._placeholder) - $elem.val('').removeClass('placeholder').attr('spellcheck', true); - }; - - this.blur_textfield = function(elem) - { - elem._hasfocus = false; - var $elem = $(elem); - if (elem._placeholder && (!$elem.val() || $elem.val() == elem._placeholder)) - $elem.addClass('placeholder').attr('spellcheck', false).val(elem._placeholder); - }; - // write to the document/window title this.set_pagetitle = function(title) { diff --git a/program/js/common.js b/program/js/common.js index eb9a3c682..a1ba878d4 100644 --- a/program/js/common.js +++ b/program/js/common.js @@ -694,11 +694,9 @@ Date.prototype.getStdTimezoneOffset = function() } // Make getElementById() case-sensitive on IE -if (bw.ie) -{ +if (bw.ie) { document._getElementById = document.getElementById; - document.getElementById = function(id) - { + document.getElementById = function(id) { var i = 0, obj = document._getElementById(id); if (obj && obj.id != id) @@ -709,6 +707,39 @@ if (bw.ie) } } +// jQuery plugin to emulate HTML5 placeholder attributes on input elements +jQuery.fn.placeholder = function(text) { + return this.each(function() { + var elem = $(this); + this.title = text; + + if ('placeholder' in this) { + elem.attr('placeholder', text); // Try HTML5 placeholder attribute first + } + else { // Fallback to Javascript emulation of placeholder + this._placeholder = text; + elem.blur(function(e) { + if ($.trim(elem.val()) == "") + elem.val(text); + elem.triggerHandler('change'); + }) + .focus(function(e) { + if ($.trim(elem.val()) == text) + elem.val(""); + elem.triggerHandler('change'); + }) + .change(function(e) { + var active = elem.val() == text; + elem[(active ? 'addClass' : 'removeClass')]('placeholder').attr('spellcheck', active); + }); + + if (this != document.activeElement) // Do not blur currently focused element + elem.blur(); + } + }); +}; + + // This code was written by Tyler Akins and has been placed in the // public domain. It would be nice if you left this header intact. // Base64 code from Tyler Akins -- http://rumkin.com -- cgit v1.2.3