Input file size at boot - text length

Question

I am trying to check jQuery text length in onLoad input field and resize input field to match. Here is my code attempt:

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

I get the following error:

this.val is not a function

What am I doing wrong?

Update: Now I no longer get the first error, but the length is displayed as 0, although it should not be. (I use a warning to check what length is). Why is this 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 displayed correctly in the warning, but I get an error message:

The index or size is negative or greater than the allowable amount.

Answer 1

As Alien Webguy said , you are trying to call the jQuery ( val ) function on , which is probably a raw DOM or window element (you did not have enough context to find out what this , but the error tells us this is not like a jQuery instance ) the document object (because the one that jQuery sets this when calling your ready handler). (Your update made this clear.) So, first you need to get the correct link 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. This is because size works in uniform character widths.

Instead, it is common to measure the actual string using an out-of-page element with the same font family, style, size, decoration, etc. etc. as an 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"); } }); 

Please note that I also resize to different events; I doubt the list is comprehensive, but it gives you an idea.

Answer 2

You used $(this) in a confusing way here because we can't see how the rest of the code works.

For instance:

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

In the above code, $(this) refers to $('body') , and you will 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); }); 

Answer 3

You need to surround this a jQuery $(this) object $(this)