创建一个自动调整大小的文本区域

还有另一个关于这个的帖子，我试过了。但有一个问题:如果你删除内容，文本区域不会缩小。我找不到任何方法将其缩小到正确的大小- clientHeight值返回为文本区域的完整大小，而不是它的内容。

该页面的代码如下:

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 )
    };
}

当前回答

改进的响应式纯JS解决方案，以@DreamTeK的第二个选项为基础

下面还处理了底部填充以及窗口大小的调整。像这样，这对我来说是一个近乎完美的解决方案。非常感谢他。

注意:jsfiddle有一个奇怪的问题，文本区域太高，底部有太多的空间，但是复制和粘贴这段代码到一个空的html文件是完美的。

有一个小问题，但当滚动条出现在页面和文本区域收缩和包装文本，并创建一个新的行。上面的函数没有考虑到这一点，我提出了一个问题，但似乎没有人知道解决办法。如果你有解决这个问题的建议，我将非常高兴。

2022-08-24 11:09:25

其他回答

这是一个angularjs指令，用于panzi的答案。

 module.directive('autoHeight', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element = element[0];
                var resize = function(){
                    element.style.height = 'auto';
                    element.style.height = (element.scrollHeight)+'px';
                };
                element.addEventListener('change', resize, false);
                element.addEventListener('cut',    resize, false);
                element.addEventListener('paste',  resize, false);
                element.addEventListener('drop',   resize, false);
                element.addEventListener('keydown',resize, false);

                setTimeout(resize, 100);
            }
        };
    });

HTML:

<textarea ng-model="foo" auto-height></textarea>

2017-08-29 20:08:53

有人觉得满意吗?没有混乱的滚动，和唯一的JS我喜欢关于它是如果你计划在模糊保存数据…显然，它在所有流行的浏览器上都是兼容的:http://caniuse.com/#feat=contenteditable

只要把它设置成文本框的样式，它就会自动调整大小……将它的最小高度设置为首选文本高度。

这种方法的最酷之处在于，您可以在某些浏览器上保存和标记。

http://jsfiddle.net/gbutiri/v31o8xfo/

2014-10-16 20:09:28

我知道我迟到了，但我遇到的最简单的解决方案是分割你的文本区域内容在新的行字符和更新文本区域元素的行。

<textarea id="my-text-area"></textarea>

<script>
  $(function() {
    const txtArea = $('#my-text-area')
    const val = txtArea.val()
    const rowLength = val.split('\n')
    txtArea.attr('rows', rowLength)
  })
</script>

2020-09-25 18:05:56

只需使用<pre> </pre>与一些风格，如:

    pre {
        font-family: Arial, Helvetica, sans-serif;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-size: 12px;
        line-height: 16px;
    }

2016-09-30 07:42:01

下面的工作用于剪切，粘贴等，不管这些操作是来自鼠标，键盘快捷键，从菜单栏选择一个选项…有几个答案采用了类似的方法，但它们没有考虑到box-sizing，这就是为什么它们错误地应用了样式overflow: hidden。

我执行以下操作，这也适用于max-height和rows的最小高度和最大高度。

为了绝对完整，你应该在以下几种情况下调用adjust函数:

窗口调整大小事件(如果文本区域的宽度随着窗口调整大小而改变)，或者其他改变文本区域宽度的事件当文本区域的显示样式属性发生变化时，例如当它从none(隐藏)变为block时当文本区域的值以编程方式更改时

注意使用window。getComputedStyle或getcurrentstyle在计算上可能有点昂贵，所以您可能想要缓存结果。

适用于IE6，所以我真的希望这是足够好的支持。

2017-05-01 03:01:27

创建一个自动调整大小的文本区域

推荐文章

最新文章

标签