如何使用Prototype自动调整textarea？ [英] How to autosize a textarea using Prototype?
问题描述
我目前正在为我工作的公司开发一个内部销售应用程序，我有一个允许用户更改收货地址的表单。
I'm currently working on an internal sales application for the company I work for, and I've got a form that allows the user to change the delivery address.
现在我觉得它看起来会好得多，如果我用于主要地址详细信息的textarea只占用其中文本的区域，并在文本被更改时自动调整大小。
Now I think it would look much nicer, if the textarea I'm using for the main address details would just take up the area of the text in it, and automatically resize if the text was changed.
这是目前的截图。
有任何想法吗？
@Chris
一个好点，但有理由我希望它能够调整大小。我希望它占用的区域是其中包含的信息区域。正如你在屏幕截图中看到的那样，如果我有一个固定的textarea，它会占用相当大的垂直空间。
A good point, but there are reasons I want it to resize. I want the area it takes up to be the area of the information contained in it. As you can see in the screen shot, if I have a fixed textarea, it takes up a fair wack of vertical space.
我可以减少字体，但我需要地址大而且可读。现在我可以减小文本区域的大小，但是我遇到的问题是地址行需要3或4行（一行需要5行）。需要用户使用滚动条是一个主要的禁忌。
I can reduce the font, but I need address to be large and readable. Now I can reduce the size of the text area, but then I have problems with people who have an address line that takes 3 or 4 (one takes 5) lines. Needing to have the user use a scrollbar is a major no-no.
我想我应该更具体一点。我正在垂直调整大小，宽度无关紧要。唯一的问题是，当窗口宽度太小时，ISO编号（大1）会被推到地址下面（如截图所示）。
I guess I should be a bit more specific. I'm after vertical resizing, and the width doesn't matter as much. The only problem that happens with that, is the ISO number (the large "1") gets pushed under the address when the window width is too small (as you can see on the screenshot).
这不是要有一个gimick;这是关于有一个文本字段，用户可以编辑，不会占用不必要的空间，但会显示其中的所有文字。
It's not about having a gimick; it's about having a text field the user can edit that won't take up unnecessary space, but will show all the text in it.
虽然如果有人想出另一个解决这个问题的方法我也对此持开放态度。
Though if someone comes up with another way to approach the problem I'm open to that too.
我修改了一点代码，因为它是表现得有些奇怪。我将其更改为在keyup上激活，因为它不会考虑刚刚输入的字符。
I've modified the code a little because it was acting a little odd. I changed it to activate on keyup, because it wouldn't take into consideration the character that was just typed.
resizeIt = function() {
var str = $('iso_address').value;
var cols = $('iso_address').cols;
var linecount = 0;
$A(str.split("\n")).each(function(l) {
linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
})
$('iso_address').rows = linecount;
};
推荐答案
当你在人们的墙上写字时，Facebook会这么做但只能垂直调整大小。
Facebook does it, when you write on people's walls, but only resizes vertically.
由于自动换行，长行等等，水平调整大小让我觉得一团糟，但垂直调整大小似乎相当安全很好。
Horizontal resize strikes me as being a mess, due to word-wrap, long lines, and so on, but vertical resize seems to be pretty safe and nice.
我所知道的Facebook使用新手都没有提到任何关于它的事情或者被混淆了。我用这个作为轶事证据来说'继续，实现它'。
None of the Facebook-using-newbies I know have ever mentioned anything about it or been confused. I'd use this as anecdotal evidence to say 'go ahead, implement it'.
使用原型（因为这是我所熟悉的）：
Some JavaScript code to do it, using Prototype (because that's what I'm familiar with):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script language="javascript">
google.load('prototype', '1.6.0.2');
</script>
</head>
<body>
<textarea id="text-area" rows="1" cols="50"></textarea>
<script type="text/javascript" language="javascript">
resizeIt = function() {
var str = $('text-area').value;
var cols = $('text-area').cols;
var linecount = 0;
$A(str.split("\n")).each( function(l) {
linecount += Math.ceil( l.length / cols ); // Take into account long lines
})
$('text-area').rows = linecount + 1;
};
// You could attach to keyUp, etc. if keydown doesn't work
Event.observe('text-area', 'keydown', resizeIt );
resizeIt(); //Initial on load
</script>
</body>
</html>
PS：显然这个JavaScript代码非常幼稚，没有经过充分测试，你可能不想要要在带有小说的文本框中使用它，但你会得到一般的想法。
PS: Obviously this JavaScript code is very naive and not well tested, and you probably don't want to use it on textboxes with novels in them, but you get the general idea.
这篇关于如何使用Prototype自动调整textarea？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
