Function for text width measure in pixels:
(function($) {
$.fn.textWidth = function () {
$body = $('body');
$this = $(this);
$text = $this.text();
if($text=='') $text = $this.val();
var calc = '<div style="clear:both;display:block;visibility:hidden;"><span style="width;inherit;margin:0;font-family:' + $this.css('font-family') + ';font-size:' + $this.css('font-size') + ';font-weight:' + $this.css('font-weight') + '">' + $text + '</span></div>';
$body.append(calc);
var width = $('body').find('span:last').width();
$body.find('span:last').parent().remove();
return width;
};
})(jQuery);
Call of the function:
var $input = $(input_element_id);
var text_width = $input.textWidth();
alert(text_width);
Like the blog