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

还有另一个关于这个的帖子，我试过了。但有一个问题:如果你删除内容，文本区域不会缩小。我找不到任何方法将其缩小到正确的大小- 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 )
    };
}

当前回答

如果你不需要支持IE8，你可以使用input事件:

var resizingTextareas = [].slice.call(document.querySelectorAll('textarea[autoresize]'));

resizingTextareas.forEach(function(textarea) {
  textarea.addEventListener('input', autoresize, false);
});

function autoresize() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight+'px';
  this.scrollTop = this.scrollHeight;
  window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight));
}

现在你只需要添加一些CSS，你就完成了:

textarea[autoresize] {
  display: block;
  overflow: hidden;
  resize: none;
}

用法:

<textarea autoresize>Type here and I’ll resize.</textarea>

你可以在我的博客文章中阅读更多关于它是如何工作的。

2014-07-25 14:27:49

其他回答

jQuery的解决方案请根据实际情况调整CSS

css……

div#container textarea {
    min-width: 270px;
    width: 270px;
    height: 22px;
    line-height: 24px;
    min-height: 22px;
    overflow-y: hidden; /* fixes scrollbar flash - kudos to @brettjonesdev */
    padding-top: 1.1em; /* fixes text jump on Enter keypress */
}

javascript……

// auto adjust the height of
$('#container').delegate( 'textarea', 'keydown', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keydown();

或替代jQuery 1.7+…

// auto adjust the height of
$('#container').on( 'keyup', 'textarea', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keyup();

我已经创建了一个具有绝对最小样式的小提琴作为您的实验的起点…… http://jsfiddle.net/53eAy/951/

2011-12-15 15:14:41

<!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是任意的，测试一下看看哪个最适合你。

你可以不使用样式和脚本标记，但这会变得有点混乱(这是老式的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)

斯菲德尔

2012-07-24 09:48:57

我对多个文本区域使用了以下代码。在Chrome 12, Firefox 5和IE 9中工作良好，即使在文本区域执行删除，剪切和粘贴操作。

2011-06-23 15:10:50

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

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

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

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

2014-10-16 20:09:28

你可以使用JQuery在输入时扩展文本区域:

$(文档);(“文本区域”)。每个(函数(){ Var offset = this。offsetHeight - this.clientHeight; (美元)。On ('keyup input focus'， function () { $(this).css('height'， 'auto').css('height'， this。scrollHeight + offset); })； })； < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div > < textarea name = "注意" > < / >文本区域 < div >

2018-11-28 00:10:22

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

推荐文章

最新文章

标签