Results 1 to 7 of 7

Thread: Putting Label inside textbox

  1. #1
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default Putting Label inside textbox

    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 ?

    Code:
    /**
     * 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);
    
      });
    };

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,992
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Does it work with jQuery 1.8.2?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    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
    Code:
    display : none
    inside javscript code. Is this will fail in any browsers ? Iam getting right result in IE8 and Zilla

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by letom View Post
    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?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,992
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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.
    Last edited by jscheuer1; 04-29-2013 at 08:53 PM. Reason: typo in code (0 for o)
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    letom (04-29-2013)

  7. #6
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    Quote Originally Posted by traq View Post
    what "form validation"? Are you talking about a conflict with another plugin?
    YES.The main subject is "Putting Label inside text box".

  8. #7
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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:

    Code:
    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...

Similar Threads

  1. Putting textbox text into variable
    By Penny94 in forum JavaScript
    Replies: 1
    Last Post: 10-15-2012, 01:13 AM
  2. My ASP label not displaying
    By gib65 in forum ASP
    Replies: 2
    Last Post: 02-03-2011, 02:06 PM
  3. Putting variables inside variables?
    By TheJoshMan in forum PHP
    Replies: 12
    Last Post: 10-15-2008, 12:42 PM
  4. Replies: 2
    Last Post: 01-16-2008, 08:32 AM
  5. Replies: 2
    Last Post: 06-10-2007, 08:45 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •