Jquery Onload fit输入大小与文本长度的匹配

我试图让jQuery测试输入框onLoad中文本的长度，并更改输入框的大小以适应。以下是我迄今为止的代码尝试：

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

我得到以下错误：

this.val不是一个函数

我做错了什么

更新：现在我不再得到第一个错误，但长度显示为0，即使不应该是。（我正在使用警报检查长度）。为什么会这样

更新：以下是代码上下文：

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

新错误-长度在警报中正确显示，但我收到错误：

索引或大小为负数或大于允许的数量

---

您需要将

this

包围到jQuery对象

$（this）

中，因为我们看不到其余的代码是如何发挥作用的，所以您在这里使用的

$（this）

例如：

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

在上面的代码中，

$（this）

指的是

$（'body'）

，您需要这样做：

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

但是，如果您的事件处理程序绑定到

$（“#emailSubject”）

，则

$（此）

，您甚至可以使用它两次：

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

例如，您试图调用jQuery函数（

val

），该函数可能是原始DOM元素或

窗口

对象（您没有显示足够的上下文让我们知道

这个

是什么，但错误告诉我们它不是jQuery实例）文档对象（因为这就是jQuery在调用

ready

处理程序时设置

this

的原因）。（您的更新澄清了这一点。）因此，第一件事是获取字段的正确引用并将其包装到jQuery实例中

但另外，如果您将

size

设置为字符数，则字段几乎肯定会比您想要的大得多。这是因为

size

在统一的字符宽度下工作

相反，通常的做法是使用与输入元素具有相同字体系列、样式、大小、文本装饰等的页外元素测量实际字符串

CSS:

HTML:

---

注意，我也在调整各种事件的大小；我怀疑那里的列表是否全面，但它提供了一个想法。

或者，类似地，使用

this.value.length

。是的，我只是记住了

jQuery

要记住的有用信息：-1在他的示例中，

$（这个）

不会引用

$（'emailSubject'））

除非它在绑定到

$（'emailSubject'）的事件处理程序中。

@SLaks我试图引用$（'emailSubject'）。正在使用$（此）这不是正确的方法吗？将

size

属性设置为字符数并不能满足您的要求。请亲自查看：@dmr:

此

在不同的位置意味着不同的事情。您考虑的用途是在事件处理程序中，jQuery确保事件处理程序将

this

设置为原始DOM元素。但是如果您使用

this

，它就不是您所钩住的

#emailSubject

事件的事件处理程序。事实上，它是在一个事件处理程序（即

就绪的
事件）中，您钩住了
文档
，因此
这个
将是
文档
。
#theField, #measure {
  font-family: serif;
  font-size: 12pt;
  font-style: normal;
}
#measure {
  position: absolute;
  left: -10000px;
  top: 0px;
}

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

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");
  }
});