Improve input field placeholders: use native attributes if supported, encapsulate in jquery plugin

2 files changed, 36 insertions, 23 deletions

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