我目前正在为我工作的公司开发一个内部销售应用程序，并且我有一个允许用户更改送货地址的表单。
现在，我认为如果我用于主要地址详细信息的文本区域仅占据其中文本的区域，并且在文本发生更改时自动调整大小，那么它看起来会好得多。
这是当前的屏幕截图。
有任何想法吗？
@Chris
很好，但我有理由希望调整它的大小。我希望它占用的区域是其中包含的信息的区域。正如您在屏幕截图中看到的，如果我有一个固定的文本区域，它会占用相当大的垂直空间。
我可以减小字体，但我需要地址大且可读。现在我可以减小文本区域的大小，但是对于那些地址行需要 3 或 4 行（一个需要 5 行）的人来说，我会遇到问题。需要让用户使用滚动条是一个主要的禁忌。
我想我应该更具体一点。我正在垂直调整大小，宽度并不那么重要。出现的唯一问题是，当窗口宽度太小时，ISO 编号（大的“1”）会被推到地址下方（如屏幕截图所示）。
这不是有什么噱头，而是有什么花招。它是关于用户可以编辑的文本字段，该文本字段不会占用不必要的空间，但会显示其中的所有文本。
不过，如果有人想出另一种方法来解决这个问题，我也愿意。
我对代码做了一些修改，因为它的行为有点奇怪。我将其更改为在按键时激活，因为它不会考虑刚刚键入的字符。
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 的新手中没有一个人提到过这件事，也没有人对此感到困惑。我会用它作为轶事证据来说“继续，实施它”。
一些 JavaScript 代码可以做到这一点，使用原型 http://en.wikipedia.org/wiki/Prototype_JavaScript_Framework（因为那是我熟悉的）：
<!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 代码非常幼稚，没有经过充分测试，您可能不想在包含小说的文本框中使用它，但您已经了解了总体思路。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
