Permalink
Browse files

Fixed known bugs

  • Loading branch information...
1 parent 75a0f75 commit 586567d1e0890cdf6d943c9c7679e033954a8156 @alexanderdickson committed Feb 16, 2011
Showing with 160 additions and 104 deletions.
  1. +3 −1 README.md
  2. +157 −103 jquery.inputlabel.js
View
@@ -1,7 +1,9 @@
-#inputLabel 2.1#
+#inputLabel 2.2#
Copyright (c) 2011 Alex Dickson
+Releases 2010-02-16.
+
Licensed under the MIT licenses.
[http://www.alexanderdickson.com](http://www.alexanderdickson.com)
View
@@ -1,5 +1,5 @@
/*
- * inputLabel 2.1
+ * inputLabel 2.2
* -----------------
* An easy cross browser compatible way to have labels contained in their inputs.
* http://www.alexanderdickson.com/
@@ -11,8 +11,18 @@
*
*/
-;(function($) {
+;
+(function($) {
$.fn.inputLabel = function(options) {
+
+ var copyStyles = function(styles, target, source) {
+ $.each(styles, function(i, style) {
+ target.css(style, function() {
+ return source.css(style);
+ });
+ });
+ }
+
var defaults = {
// Custom label
customLabel: false,
@@ -26,138 +36,182 @@
// Support for custom label passed in as string
if (typeof options == 'string') {
- options = { customLabel: options };
+ options = {
+ customLabel: options
+ };
}
options = $.extend(defaults, options);
-
return this.each(function() {
- var objs = $(this);
- objs.each(function() {
- var obj = $(this);
+ var obj = $(this);
+
+ // Only 'input[type=text]', 'input[type=password]' and 'textarea'
+ if (!obj.is(':text, :password, textarea')) {
+ return;
+ }
+
+
+ // Get associated label
+ // Check if using 'for' attribute
+ var id = obj.attr('id'),
+ label = $('label[for = "' + id + '"]');
+
+ // If no 'id' attribute, we'll make one
+ if (!id) {
+ // There should only ever be one name per input,
+ // except for PHP style 'field[]'.
+ // To combat this, I'll add the index to the 'id',
+ // and also prefix with `input-` to stop any invalid 'id'
+ // which may start with a number.
+ id = 'input-' + obj.attr('name') + '-' + obj.index('*');
+ console.log(id);
+ obj.attr({
+ 'id': id
+ });
- // Only input[type=text], input[type=password] and textareas
- if (!obj.is(':text, :password, textarea')) {
- return;
- }
+ }
- // Get associated label
- // Check if using for attribute
- var id = obj.attr('id'),
- label = $('label[for = "' + id + '"]');
+ // Otherwise, check for ancestor label
+ if (label.length == 0) {
+ label = obj.closest('label');
+ // Rearrange it
+ obj.insertAfter(label);
+ }
- // Otherwise, check for ancestor label
- if (label.length == 0) {
- label = obj.closest('label');
- // Rearrange it to make it possible below
- obj.insertAfter(label);
- }
+ // Could not find label, so try to make one
+ if (label.length == 0) {
+ label = $('<label />', {
+ 'for': id
+ });
- // Could not find label, so make one with custom label if present, or skip this element!
- if (label.length == 0) {
- if (options.customLabel) {
- label = $('<label />', {
- 'for': id
- });
- label.insertBefore(obj);
-
- } else {
- return;
- }
- }
+ // Maybe there is a placeholder attribute we can get
+ var placeholderAttr;
if (options.customLabel) {
label.html(options.customLabel);
+ } else if (placeholderAttr = obj.attr('placeholder')) {
+ label.html(placeholderAttr);
+ obj.removeAttr('placeholder');
+ } else {
+ // Well, we tried :)
+ return;
}
- if (options.addTitleAtt) {
- // Only add title if one does not exist
- if ($.trim(obj.attr('title')) == '') {
- obj.attr('title', $.trim(label.text()));
- }
+ label.insertBefore(obj);
+ }
+
+ if (options.addTitleAtt) {
+ // Only add title if one does not exist
+ if ($.trim(obj.attr('title')) == '') {
+ obj.attr('title', $.trim(label.text()));
}
+ }
- label.addClass(options.labelClass);
+ label.addClass(options.labelClass);
- // Wrap element
- var wrapper = obj.add(label).wrapAll('<div/>').parent();
- wrapper.addClass(options.wrapperClass);
+ // Wrap element
+ var objParent = obj.parent(),
+ wrapper = label.add(obj).wrapAll('<div/>').parent();
- // Some neccesary CSS
- var inputWidth = obj.outerWidth(),
- inputHeight = obj.outerHeight();
+ wrapper.appendTo(objParent);
+ wrapper.addClass(options.wrapperClass);
- wrapper.css({
- width: inputWidth,
- height: inputHeight,
- position: 'relative'
+ // Some neccesary CSS
+ obj.add(label).css({
+ position: 'absolute',
+ zIndex: 0
+ });
- });
+ // Have to copy certain styles from input to wrapper
+ var objToWrapperCopyStyles = [
+ 'paddingTop',
+ 'paddingRight',
+ 'paddingBottom',
+ 'paddingLeft',
+ 'marginTop',
+ 'marginRight',
+ 'marginBottom',
+ 'marginLeft'
+ ];
+
+ copyStyles(objToWrapperCopyStyles, wrapper, obj);
+
+ obj.css({
+ marginTop: 0,
+ marginRight: 0,
+ marginBottom: 0,
+ marginLeft: 0
+ })
+
+ wrapper.css({
+ width: obj.width(),
+ height: obj.height(),
+ position: 'relative'
- obj.add(label).css({
- position: 'absolute',
- zIndex: 0
- });
+ });
+ // Have to copy certain styles from object to label
+ var objToLabelCopyStyles = [
+ 'fontSize',
+ 'fontFamily',
+ 'lineHeight',
+ 'textAlign',
+ 'paddingTop',
+ 'paddingRight',
+ 'paddingBottom',
+ 'paddingLeft'
+ ];
+
+ copyStyles(objToLabelCopyStyles, label, obj);
+
+ obj.css({
+ top: 0,
+ left: 0,
+ zIndex: 0
+ });
- // Have to copy certain styles
- var copyStyles = [
- 'fontSize',
- 'fontFamily',
- 'lineHeight'
- ];
+ label.css({
+ top: parseInt(obj.css('borderTopWidth')),
+ bottom: parseInt(obj.css('borderBottomWidth')),
+ left: parseInt(obj.css('borderLeftWidth')),
+ right: parseInt(obj.css('borderRightWidth')),
+ zIndex: 1,
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ width: 'auto',
+ cursor: 'text'
+ });
- $.each(copyStyles, function(i, style) {
- label.css(style, function() {
- return obj.css(style);
- });
- });
+ // Events
+ var defaultValue = $.trim(obj[0].defaultValue),
+ textIndentOffset = '-9999px';
- obj.css({
- top: 0,
- left: 0,
- zIndex: 0
- });
+ if (obj.val() == defaultValue) {
+ obj.css('textIndent', textIndentOffset);
+ }
- label.css({
- top: parseInt(obj.css('borderTopWidth')) + parseInt(obj.css('paddingTop')),
- bottom: parseInt(obj.css('borderBottomWidth')) + parseInt(obj.css('paddingBottom')),
- left: parseInt(obj.css('borderLeftWidth')) + parseInt(obj.css('paddingLeft')),
- right: parseInt(obj.css('borderRightWidth')) + parseInt(obj.css('paddingRight')),
- zIndex: 1,
- whiteSpace: 'nowrap',
- overflow: 'hidden'
- });
+ label.click(function() {
+ obj.focus();
+ });
- var defaultValue = $.trim(obj[0].defaultValue);
+ obj.focus(function() {
+ obj.removeClass(options.labeledClass);
- if (obj.val() == defaultValue) {
- obj.css('textIndent', '-9999px');
+ label.hide();
+ if (defaultValue || $.trim(obj.val()) == '') {
+ obj.css('textIndent', 0);
}
+ });
- label.click(function() {
- obj.focus();
- });
-
- obj.focus(function() {
- obj.removeClass(options.labeledClass);
-
- label.hide();
- if (defaultValue || $.trim(obj.val()) == '') {
- obj.css('textIndent', 0);
- }
- });
-
- obj.blur(function() {
- obj.addClass(options.labeledClass);
- var value = $.trim($(this).val());
- if (value == '' || value == defaultValue) {
- label.show();
- obj.css('textIndent', '-9999px');
- }
- });
+ obj.blur(function() {
+ obj.addClass(options.labeledClass);
+ var value = $.trim($(this).val());
+ if (value == '' || value == defaultValue) {
+ label.show();
+ obj.css('textIndent', textIndentOffset);
+ }
});
});
};

0 comments on commit 586567d

Please sign in to comment.