jquery - Onload 使输入大小适合文本长度

Question

我试图让 jQuery 测试输入框 onLoad 中文本的长度，并更改输入框的大小以适应。到目前为止，这是我的代码尝试:

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

我收到以下错误:

this.val is not a function

我做错了什么？

更新:现在我不再遇到第一个错误，但长度显示为 0，尽管它不应该是。 (我正在使用警报来检查长度)。为什么会这样？

更新:这是代码上下文:

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

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

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

Answer 1

作为Alien Webguy said ，您正在尝试对可能是原始 DOM 元素或 window 对象的 调用 jQuery 函数 (val)(您没有显示足够的上下文我们知道 this 是什么，但错误告诉我们它不是 jQuery 实例) document 对象(因为那是 jQuery 设置的 this 调用您的 ready 处理程序时)。 (您的更新澄清了这一点。)因此，第一件事是获取字段的正确引用并将其包装在 jQuery 实例中。

但另外，如果将 size 设置为字符数，该字段几乎肯定会比您想要的大得多。这是因为 size 在统一字符宽度下工作。

相反，通常的做法是使用与输入元素具有相同字体系列、样式、大小、文本修饰等的页外元素来测量实际字符串。像这样 ( 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");
  }
});

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