Onload fit input size to length of text

Question

I'm trying to have jQuery test the length of the text in the input box onLoad and change the size of the input box to fit. Here is my code attempt so far:

$("#emailSubject").attr('size', this.val().length);

I'm getting the following error:

this.val is not a function

What am I doing wrong?

Update: Now I'm no longer getting the first error, but the length is showing up as 0 even though it's not supposed to be. (I'm using an alert to check what the length is). Why would that be happening?

Update: Here is the code context:

$(
        function()
        {
            //works correctly   
            alert($("#emailSubject").val().length);
            //throws error
            $("#emailSubject").attr('size', ($(this).val().length)); 
        }
    )

New error- the length is showing up correctly in the alert, but I'm getting the error:

Index or size is negative or greater than the allowed amount.

Answer 1

As Alien Webguy said, you're trying to call a jQuery function (val) on what's probably a raw DOM element or the window object (you haven't shown enough context for us to know what this is, but the error tells us it's not a jQuery instance) the document object (because that's what jQuery sets this to when calling your ready handler). (Your update clarified it.) So the first thing is to get the correct reference for the field and wrap it in a jQuery instance.

But separately, if you set size to the number of characters, the field will almost certainly be much larger than you want. That's because size works in uniform character widths.

Instead, the usual thing is to measure the actual string using an off-page element with the same font family, style, size, text decoration, etc., etc. as the input element. Something like this (live copy):

CSS:

#theField, #measure {
  font-family: serif;
  font-size: 12pt;
  font-style: normal;
}
#measure {
  position: absolute;
  left: -10000px;
  top: 0px;
}

HTML:

<input type='text' id='theField' value=''>
<span id="measure"></span>

JavaScript:

jQuery(function($) {
  var field;

  // Hook up some events for resizing
  field = $("#theField");
  field.bind("change keypress click keydown", function() {
    resizeIt(field);
  });

  // Resize on load
  resizeIt(field);

  // Function to do the work
  function resizeIt(field) {
    var measure = $("#measure");
    measure.text(field.val());
    field.css("width", (measure.width() + 16) + "px");
  }
});

Note that there I'm resizing on various events as well; I doubt the list there is comprehensive, but it gives you an idea.

Answer 2

You are were using $(this) in a confusing way here because we can't see how the rest of the code comes into play.

For example:

$('body').bind('keypress',function(){
    $('#emailSubject').attr('size', $(this).val().length);
});

In the code above, $(this) refers to $('body') and you would need to do something like this:

$('body').bind('keypress',function(){
    var _this = $('#emailSubject');
    _this.attr('size', _this.val().length);
});

If, however, your event handler was bound to $('#emailSubject') then $(this) would work, and you could even use it twice:

$("#emailSubject").bind('keypress',function(){
    $(this).attr('size', $(this).val().length);
});