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 said，你试图在上调用一个jQuery函数（val），它可能是一个原始DOM元素或window对象（你没有显示）足够的上下文让我们知道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");
  }
});

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

Answer 2

你在这里以令人困惑的方式使用$(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')，那么$(this)将起作用，您甚至可以使用它两次：

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

Answer 3

您需要将this包围到jQuery对象$(this)

中

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

3 个答案: