创建具有自动调整大小的文本区域

关于这一点，我尝试了另外一个话题。但是有一个问题：如果删除内容， textarea不会缩小。我找不到将其缩小到正确大小的任何方法clientHeight值以textarea的完整大小而不是其内容的大小返回。

该页面上的代码如下：

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

#1楼

我知道用jquery实现此方法的一种简短正确的方法，不需要额外的隐藏div，并且可以在大多数浏览器中使用

<script type="text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){
var h=$(this);
h.height(60).height(h[0].scrollHeight);//where 60 is minimum height of textarea
});});

</script>

#2楼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Textarea autoresize</title>
    <style>
    textarea {
        overflow: hidden;
    }
    </style>
    <script>
    function resizeTextarea(ev) {
        this.style.height = '24px';
        this.style.height = this.scrollHeight + 12 + 'px';
    }

    var te = document.querySelector('textarea');
    te.addEventListener('input', resizeTextarea);
    </script>
</head>
<body>
    <textarea></textarea>
</body>
</html>

在Firefox 14和Chromium 18中进行了测试。数字24和12是任意的，请测试以找出最适合的数字。

您可以不使用style和script标签，但是imho有点混乱（这是旧样式的HTML + JS，不鼓励使用）。

<textarea style="overflow: hidden" onkeyup="this.style.height='24px'; this.style.height = this.scrollHeight + 12 + 'px';"></textarea>

编辑：现代化的代码。将onkeyup属性更改为addEventListener。
编辑：keydown比keyup更好
编辑：使用前声明函数
编辑：输入比击键效果更好（thnx @ WASD42和@ MA-Maddin）

jsfiddle

#3楼

这里的一些答案没有考虑填充。

假设您不想通过maxHeight，这对我有用：

    // obviously requires jQuery

    // element is the textarea DOM node

    var $el = $(element);
    // inner height is height + padding
    // outerHeight includes border (and possibly margins too?)
    var padding = $el.innerHeight() - $el.height();
    var originalHeight = $el.height();

    // XXX: Don't leave this hardcoded
    var maxHeight = 300;

    var adjust = function() {
        // reset it to the original height so that scrollHeight makes sense
        $el.height(originalHeight);

        // this is the desired height (adjusted to content size)
        var height = element.scrollHeight - padding;

        // If you don't want a maxHeight, you can ignore this
        height = Math.min(height, maxHeight);

        // Set the height to the new adjusted height
        $el.height(height);
    }

    // The input event only works on modern browsers
    element.addEventListener('input', adjust);

#4楼

这是我将MVC HTML Helper用于TextArea时所做的。我有很多textarea元素，因此必须使用Model Id区分它们。

 @Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })

并在脚本中添加了以下内容：

   function resizeTextBox(ID) {            
        var text = document.getElementById('text' + ID);
        text.style.height = 'auto';
        text.style.height = text.scrollHeight + 'px';            
    }

我已经在IE10和Firefox23上进行了测试

#5楼

有一种稍微不同的方法。

<div style="position: relative">
  <pre style="white-space: pre-wrap; word-wrap: break-word"></pre>
  <textarea style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea>
</div>

这个想法是将文本从textarea复制到pre并让CSS确保它们具有相同的大小。

好处是框架提供了简单的工具来移动文本而不会发生任何事件。也就是说，在AngularJS中，您可以将ng-model="foo" ng-trim="false"到textarea并将ng-bind="foo + '\\n'"到pre 。看到一个小提琴。

只需确保pre具有与textarea相同的字体大小即可。

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3195235

标签

textarea