Fixed known bugs

alexanderdickson · Feb 16, 2011 · 586567d · 586567d
1 parent 75a0f75
commit 586567d
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 104 deletions.
diff --git a/README.md b/README.md
@@ -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)

diff --git a/jquery.inputlabel.js b/jquery.inputlabel.js
@@ -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
+            // Otherwise, check for ancestor label
-                // Check if using for attribute
+            if (label.length == 0) {
-                var id = obj.attr('id'),
+                label = obj.closest('label');
-                    label = $('label[for = "' + id + '"]');
+                // Rearrange it
+                obj.insertAfter(label);
+            }
 
-                // Otherwise, check for ancestor label
+            // Could not find label, so try to make one
-                if (label.length == 0) {
+            if (label.length == 0) {
-                    label = obj.closest('label');
+                label = $('<label />', {
-                    // Rearrange it to make it possible below
+                    'for': id
-                    obj.insertAfter(label);
+                });
-                }
 
-                // Could not find label, so make one with custom label if present, or skip this element!
+                // Maybe there is a placeholder attribute we can get
-               if (label.length == 0) {
+                var placeholderAttr;
-                    if (options.customLabel) {
-                        label = $('<label />', {
-                            'for': id
-                        });
-                        label.insertBefore(obj);
-
-                    } else {
-                        return;
-                    }
-                }
 
                 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) {
+                label.insertBefore(obj);
-                    // Only add title if one does not exist
+            }
-                    if ($.trim(obj.attr('title')) == '') {
+
-                        obj.attr('title', $.trim(label.text()));
+            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
+            // Wrap element
-                var wrapper = obj.add(label).wrapAll('<div/>').parent();
+            var objParent = obj.parent(),
-                wrapper.addClass(options.wrapperClass);
+                wrapper = label.add(obj).wrapAll('<div/>').parent();
 
-                // Some neccesary CSS
+            wrapper.appendTo(objParent);
-                var inputWidth = obj.outerWidth(),
+            wrapper.addClass(options.wrapperClass);
-                    inputHeight = obj.outerHeight();
 
-                wrapper.css({
+            // Some neccesary CSS
-                    width: inputWidth,
+            obj.add(label).css({
-                    height: inputHeight,
+                position: 'absolute',
-                    position: 'relative'
+                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
+            label.css({
-                var copyStyles = [
+                top: parseInt(obj.css('borderTopWidth')),
-                    'fontSize',
+                bottom: parseInt(obj.css('borderBottomWidth')),
-                    'fontFamily',
+                left: parseInt(obj.css('borderLeftWidth')),
-                    'lineHeight'
+                right: parseInt(obj.css('borderRightWidth')),
-                    ];
+                zIndex: 1,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                width: 'auto',
+                cursor: 'text'
+            });
 
-                $.each(copyStyles, function(i, style) {
+            // Events
-                    label.css(style, function() {
+            var defaultValue = $.trim(obj[0].defaultValue),
-                        return obj.css(style);
+                textIndentOffset = '-9999px';
-                    });
-                });
 
-                obj.css({
+            if (obj.val() == defaultValue) {
-                    top: 0,
+                obj.css('textIndent', textIndentOffset);
-                    left: 0,
+            }
-                    zIndex: 0
-                });
 
-                label.css({
+            label.click(function() {
-                    top: parseInt(obj.css('borderTopWidth')) + parseInt(obj.css('paddingTop')),
+                obj.focus();
-                    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'
-                });
 
-                var defaultValue = $.trim(obj[0].defaultValue);
+            obj.focus(function() {
+                obj.removeClass(options.labeledClass);
 
-                if (obj.val() == defaultValue) {
+                label.hide();
-                    obj.css('textIndent', '-9999px');
+                if (defaultValue || $.trim(obj.val()) == '') {
+                    obj.css('textIndent', 0);
                 }
+            });
 
-                label.click(function() {
+            obj.blur(function() {
-                    obj.focus();
+                obj.addClass(options.labeledClass);
-                });
+                var value = $.trim($(this).val());
-
+                if (value == '' || value == defaultValue) {
-                obj.focus(function() {
+                    label.show();
-                    obj.removeClass(options.labeledClass);
+                    obj.css('textIndent', textIndentOffset);
-
+                }
-                    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');
-                    }
-                });
             });
         });
     };