Onload将输入大小与文本长度相匹配

Question

我正在尝试让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)); 
        }
    )

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

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

Answer 1

正如Alien Webguy所说,你试图val在一个原始的DOM元素或window对象this上调用一个jQuery函数()你没有显示足够的上下文让我们知道它是什么,但错误告诉我们它不是一个jQuery实例)的document对象(因为这是jQuery的设置this调用你时ready的处理程序).(您的更新澄清了它.)所以第一件事是获取该字段的正确引用并将其包装在jQuery实例中.

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

相反,通常的做法是使用具有相同字体系列,样式,大小,文本修饰等的离页元素作为输入元素来测量实际字符串.像这样的东西(实时复制):

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

请注意,我正在调整各种事件; 我怀疑列表是否全面,但它给了你一个想法.