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

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

当前回答

作为一种不同的方法，您可以使用<span>来自动调整它的大小。你需要通过添加contentteditable ="true"属性使其可编辑，这样就完成了:

div { 宽度:200 px; ｝跨度{ 边框:1px实心#000; 填充:5 px; ｝ < div > <span contenteditable="true">此文本可以由用户编辑</span> < / div >

这种方法的唯一问题是，如果希望将值作为表单的一部分提交，就必须自己用JavaScript完成。这样做相对容易。例如，您可以添加一个隐藏字段，并在表单的onsubmit事件中将span的值赋给隐藏字段，然后该隐藏字段将自动与表单一起提交。

2018-03-24 14:40:25

其他回答

稍微更正一下。完美演绎歌剧

  $('textarea').bind('keyup keypress', function() {
      $(this).height('');
      var brCount = this.value.split('\n').length;
      this.rows = brCount+1; //++ To remove twitching
      var areaH = this.scrollHeight,
          lineHeight = $(this).css('line-height').replace('px',''),
          calcRows = Math.floor(areaH/lineHeight);
      this.rows = calcRows;
  });

2011-06-19 12:14:03

作为一种不同的方法，您可以使用<span>来自动调整它的大小。你需要通过添加contentteditable ="true"属性使其可编辑，这样就完成了:

div { 宽度:200 px; ｝跨度{ 边框:1px实心#000; 填充:5 px; ｝ < div > <span contenteditable="true">此文本可以由用户编辑</span> < / div >

2018-03-24 14:40:25

如果你不需要支持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

找到了从这里出发的一班班轮;

<textarea name="text" oninput="this.style.height = ''; this.style.height = this.scrollHeight +'px'"></textarea>

2019-12-30 08:06:10

这段代码也适用于粘贴和选择删除。

onKeyPressTextMessage = function（）{ var textArea =event.currentTarget; 文本区域.样式.高度 = '自动'; 文本区域.样式.高度 = 文本区域.滚动高度 + 'px'; }; <textation onkeyup=“onKeyPressTextMessage（event）” name=“welcomeContentTmpl” id=“welcomeContent” onblur=“onblurWelcomeTitle（event）” rows=“2” cols=“40” maxlength=“320”></textarea>

这是JSFiddle

2016-09-12 06:01:30

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

推荐文章

最新文章

标签