Putting Label inside textbox

[letom]

How can we put label inside the textbox using jquery ?Is there any plugin available for that
When iam using the following with Jquery 1.9 the jquery validation is stop working ?

/**
 * jQuery.labelify - Display in-textbox hints
 * Stuart Langridge, http://www.kryogenix.org/
 * Released into the public domain
 * Date: 25th June 2008
 * @author Stuart Langridge
 * @version 1.3
 *
 *
 * Basic calling syntax: $("input").labelify();
 * Defaults to taking the in-field label from the field's title attribute
 *
 * You can also pass an options object with the following keys:
 *   text
 *     "title" to get the in-field label from the field's title attribute 
 *      (this is the default)
 *     "label" to get the in-field label from the inner text of the field's label
 *      (note that the label must be attached to the field with for="fieldid")
 *     a function which takes one parameter, the input field, and returns
 *      whatever text it likes
 *
 *   labelledClass
 *     a class that will be applied to the input field when it contains the
 *      label and removed when it contains user input. Defaults to blank.
 *  
 */
jQuery.fn.labelify = function(settings) {
  settings = jQuery.extend({
    text: "title",
    labelledClass: ""
  }, settings);
  var lookups = {
    title: function(input) {
      return $(input).attr("title");
    },
    label: function(input) {
      return $("label[for=" + input.id +"]").text();
    }
  };
  var lookup;
  var jQuery_labellified_elements = $(this);
  return $(this).each(function() {
    if (typeof settings.text === "string") {
      lookup = lookups[settings.text]; // what if not there?
    } else {
      lookup = settings.text; // what if not a fn?
    };
    // bail if lookup isn't a function or if it returns undefined
    if (typeof lookup !== "function") { return; }
    var lookupval = lookup(this);
    if (!lookupval) { return; }

    // need to strip newlines because the browser strips them
    // if you set textbox.value to a string containing them    
    $(this).data("label",lookup(this).replace(/\n/g,''));
    $(this).focus(function() {
      if (this.value === $(this).data("label")) {
        this.value = this.defaultValue;
        $(this).removeClass(settings.labelledClass);
      }
    }).blur(function(){
      if (this.value === this.defaultValue) {
        this.value = $(this).data("label");
        $(this).addClass(settings.labelledClass);
      }
    });
    
    var removeValuesOnExit = function() {
      jQuery_labellified_elements.each(function(){
        if (this.value === $(this).data("label")) {
          this.value = this.defaultValue;
          $(this).removeClass(settings.labelledClass);
        }
      })
    };
    
    $(this).parents("form").submit(removeValuesOnExit);
    $(window).unload(removeValuesOnExit);
    
    if (this.value !== this.defaultValue) {
      // user already started typing; don't overwrite their work!
      return;
    }
    // actually set the value
    this.value = $(this).data("label");
    $(this).addClass(settings.labelledClass);

  });
};

[jscheuer1]

Does it work with jQuery 1.8.2?

[letom]

John

Thanks for your message.
I am not checked it with 1.8.2 . If iam calling that lib(pasted on above code) in the page,the form validation using jquery stops working.
I don't know changing this 1.8.2 will clear this issue,but i will check it, which version of jquery is best as per your suggestion ?

BTW I got an idea that is putting a
1. A div instead of input box
2. set input box to display :none;
3. display div with content of form label(Name).
4. when click on div having label name the div display:none, and show input box

this is done using click and blur options in JavaScript with

display : none

inside javscript code. Is this will fail in any browsers ? Iam getting right result in IE8 and Zilla

[traq]

I am not checked it with 1.8.2 . If iam calling that lib(pasted on above code) in the page,the form validation using jquery stops working.

what "form validation"? Are you talking about a conflict with another plugin?

[jscheuer1]

Well, I just wanted to know if jQ 1.9 was significant for some reason. Apparently not. My guess would be that if you run the code in your first post before the validator code, it could work. It all depends upon when you're validating. If it's on submit, that might take care of it. If it's on change. blur or focus, there might still be problems.

You just have to make that, if the field is empty, that it is empty when the validator gets to it.

Otherwise, substituting a div or some other such thing would be a workaround. You could even use a text input, just as long as it's not part of the form. That could be done by using absolute positioning. The dummy inputs could be absolutely positioned and be direct children of the body element. Then to position one of them where the real input would be easy in jQuery:

var o = $('#realinput').offset();
$('#fakeinput').css({top: o.top, left: o.left});

Using jQuery's .each() you could even create a 'fake' input for each real input and prepend the fake one to the body and position it.

[letom]

what "form validation"? Are you talking about a conflict with another plugin?

YES.The main subject is "Putting Label inside text box".

[letom]

Well, I just wanted to know if jQ 1.9 was significant for some reason. Apparently not. My guess would be that if you run the code in your first post before the validator code, it could work. It all depends upon when you're validating. If it's on submit, that might take care of it. If it's on change. blur or focus, there might still be problems.

You just have to make that, if the field is empty, that it is empty when the validator gets to it.

Otherwise, substituting a div or some other such thing would be a workaround. You could even use a text input, just as long as it's not part of the form. That could be done by using absolute positioning. The dummy inputs could be absolutely positioned and be direct children of the body element. Then to position one of them where the real input would be easy in jQuery:

var 0 = $('#realinput').offset();
$('#fakeinput').css({top: o.top, left: o.left});

Using jQuery's .each() you could even create a 'fake' input for each real input and prepend the fake one to the body and position it.

My guess would be that if you run the code in your first post before the validator code, it could work

No John .. Failed... If iam spending time for doing that type of stuffs, that indeed time wasting. More over my application will fail with exceptions..
I had added the idea what i stated.. that's working fine now and validation seems to be okay...