From 9e2c949d86bb56afa37a4c952f8e8930b7c9958e Mon Sep 17 00:00:00 2001
From: thomascube <thomas@roundcube.net>
Date: Thu, 15 Mar 2012 17:55:22 -0400
Subject: [PATCH] Improve input field placeholders: use native attributes if supported, encapsulate in jquery plugin
---
program/js/common.js | 39 +++++++++++++++++++++++++++++++++++----
program/js/app.js | 20 +-------------------
2 files changed, 36 insertions(+), 23 deletions(-)
diff --git a/program/js/app.js b/program/js/app.js
index b2cb1c0..94e48a8 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -4505,9 +4505,7 @@
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)
@@ -5422,22 +5420,6 @@
}
}
}
- };
-
- 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
diff --git a/program/js/common.js b/program/js/common.js
index eb9a3c6..a1ba878 100644
--- a/program/js/common.js
+++ b/program/js/common.js
@@ -694,11 +694,9 @@
}
// 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 @@
}
}
+// 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
--
Gitblit v1.9.1