将输入大小加载到文本的长度 [英] 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>
新错误 - 警报中显示的长度正确,但我得到错误:
指数或大小为负值或大于允许的金额。
但是,如果将 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 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)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屋!