如何使用原型自动调整文本区域的大小？

javascript html css prototypejs textarea

2022-08-30 04:37:17

我目前正在为我工作的公司开发内部销售应用程序，并且我有一个允许用户更改送货地址的表单。

现在我认为它看起来会更好，如果我用于主要地址详细信息的文本区域只占用其中的文本区域，并在文本更改时自动调整大小。

这是它目前的屏幕截图。

ISO Address

有什么想法吗？

@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;
};

答案 1

Facebook做到了，当你在人们的墙上写字时，但只会垂直调整大小。

由于自动换行，长线等原因，水平调整大小对我来说是一团糟，但垂直调整大小似乎非常安全漂亮。

我认识的Facebook使用新手中，没有一个提到过它或感到困惑。我会用这个作为轶事证据说“继续，实施它”。

使用Prototype的一些JavaScript代码来做到这一点（因为这是我熟悉的）：

<!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代码非常天真，没有经过很好的测试，你可能不想在带有小说的文本框中使用它，但你得到了一般的想法。

答案 2

对其中一些答案的一个改进是让CSS做更多的工作。

基本路线似乎是：

创建一个容器元素来保存和隐藏textareadiv
使用 Javascript，保持的内容与的同步textareadiv
让浏览器执行计算该 div 高度的工作
因为浏览器处理渲染/大小隐藏，我们避免显式设置的高度。divtextarea

document.addEventListener('DOMContentLoaded', () => {
    textArea.addEventListener('change', autosize, false)
    textArea.addEventListener('keydown', autosize, false)
    textArea.addEventListener('keyup', autosize, false)
    autosize()
}, false)

function autosize() {
    // Copy textarea contents to div browser will calculate correct height
    // of copy, which will make overall container taller, which will make
    // textarea taller.
    textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}

html, body, textarea {
    font-family: sans-serif;
    font-size: 14px;
}

.textarea-container {
    position: relative;
}

.textarea-container > div, .textarea-container > textarea {
    word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
    box-sizing: border-box;
    padding: 2px;
    width: 100%;
}

.textarea-container > textarea {
    overflow: hidden;
    position: absolute;
    height: 100%;
}

.textarea-container > div {
    padding-bottom: 1.5em; /* A bit more than one additional line of text. */ 
    visibility: hidden;
}

<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>