将输入大小加载到文本的长度 [英] Onload fit input size to length of text

问题描述

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

  $（＃emailSubject）。attr（'size'，this.val ）。长度）; 
  

我收到以下错误：

< blockquote>

this.val不是函数

我做错了什么？

更新：现在我不再收到第一个错误，但长度显示为0，即使它不应该是。 （我正在使用警报来检查长度是多少）。为什么会发生这种情况？

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

<$ （$（$＃$ email $）。$（$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $长度）;
//抛出错误
$（＃emailSubject）。attr（'size'，（$（this）.val（）。length））;
}

$ / code>

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

指数或大小为负值或大于允许的金额。

解决方案

上调用一个jQuery函数（ val ）什么可能是原始数据DOM元素或窗口对象（您没有显示足够的对象t让我们知道这个是什么，但是这个错误告诉我们它不是一个jQuery实例） 文档 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; 
 
 //连接一些事件以调整大小
 field = $（＃theField）; 
 field.bind（change keypress click keydown，function（）{
 resizeIt（field）; 
}）; 
 
 //调整加载大小
 resizeIt（field）; 
 
 //执行工作的函数
 function resizeIt（field）{
 var measure = $（＃measure）; 
 measure.text（field.val（））; 
 field.css（width，（measure.width（）+ 16）+px）; 
} 
}）; 
  

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

I'm trying to have jQuery test the length of the text in the input box onLoad and change the size of the input box to fit. Here is my code attempt so far:

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

I'm getting the following error:

this.val is not a function

What am I doing wrong?

Update: Now I'm no longer getting the first error, but the length is showing up as 0 even though it's not supposed to be. (I'm using an alert to check what the length is). Why would that be happening?

Update: Here is the code context:

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

New error- the length is showing up correctly in the alert, but I'm getting the error:

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

解决方案

As Alien Webguy said, you're trying to call a jQuery function (val) on what's probably a raw DOM element or the window object (you haven't shown enough context for us to know what this is, but the error tells us it's not a jQuery instance) the document object (because that's what jQuery sets this to when calling your ready handler). (Your update clarified it.) So the first thing is to get the correct reference for the field and wrap it in a jQuery instance.

But separately, if you set size to the number of characters, the field will almost certainly be much larger than you want. That's because size works in uniform character widths.

Instead, the usual thing is to measure the actual string using an off-page element with the same font family, style, size, text decoration, etc., etc. as the input element. Something like this (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");
  }
});

Note that there I'm resizing on various events as well; I doubt the list there is comprehensive, but it gives you an idea.

这篇关于将输入大小加载到文本的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！