动态调整textarea的宽度和高度以包含文本 [英] Dynamically resize textarea width and height to contain text

问题描述

我有一个包含textarea元素的div。 div的大小是固定的，但滚动条将显示是否输入了足够的文本。目前，textarea高度正确地增长和缩小，但不是宽度。

I have a div that contains a textarea element. The div is fixed in size, but scroll bars will show if enough text is entered. Currently, the textarea height dynamically grows and shrinks correctly, but not the width.

我一直在修改这里给出的代码： http://alistapart.com/article/expanding-text-areas-made-elegant 并且已经达到了这一点（以jsfiddle显示）： http://jsfiddle.net/fayu5sh2/2/

I have been modifying the code given here: http://alistapart.com/article/expanding-text-areas-made-elegant and have gotten to this point (shown in jsfiddle): http://jsfiddle.net/fayu5sh2/2/

目前的工作方式是将textarea设置为div的100％宽度和高度，并将其内容输入隐藏的跨度，这会改变高度（当输入为按下）和包含div的宽度。当跨度正常运行时，textarea不保持宽度：100％。是否可以这样做？

The way it currently works is that the textarea is set to 100% width and height of the div, and its content is feed into a hidden span, which changes the height (when enter is pressed) and width of the containing div. While the span operates correctly, the textarea doesn't maintain width: 100%. Is it possible to do this?

隐藏的跨度目前可见，以显示其内容正在做什么，textarea中的文本应直接位于文本的顶部跨度。

The hidden span is currently visible to show what its content is doing, the text in the textarea should lie directly on top of the text in the span.

这是html：

<div id="containing_box">
    <div class="expandingArea">
        <pre><span></span><br></pre>
        <textarea></textarea>
    </div>
</div>

这是javascript：

Here is the javascript:

$(document).ready(

    function() {

        $('div.expandingArea').each(function() {
            var area = $('textarea', $(this));
            var span = $('span', $(this));

            area.bind('input', function() {
                span.text(area.val());
            });

            span.text(area.val());

            $(this).addClass('active');
        });    
    }
);

和CSS：

#containing_box {
    width: 300px;
    height: 200px;
    overflow: auto;
    border: 1px solid;
}

textarea, 
pre, p {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
}

.expandingArea {
  position: relative;
  border: 1px solid #888;
  background: #fff;
}

.expandingArea > textarea,
.expandingArea > pre {
    padding: 5px;
    background: transparent;
    white-space: pre;
}

.expandingArea > textarea {
  /* The border-box box model is used to allow
   * padding whilst still keeping the overall width
   * at exactly that of the containing element. */

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;


  /* This height is used when JS is disabled  */
  height: 100px;
  width: 100px;
}

.expandingArea.active > textarea {
  /* Hide any scrollbars */
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* Remove WebKit user-resize widget */
  resize: none;
}

.expandingArea > pre {
  /* display: none;*/
  color: blue;
}
.expandingArea.active > pre {
  display: block;
  /* Hide the text; just using it for sizing */
  /* visibility: hidden; */
}

推荐答案

你可以做一个 textarea 通过监控其 scrollWidth 和 scrollHeight 来动态调整大小输入事件。

You can make a textarea dynamically resize by monitoring its scrollWidth and scrollHeight within an input event.

此代码调整所有 textarea s的大小保持最小宽度和高度为50px：

This code resizes all textareas while maintaining a minimum width and height of 50px:

$('textarea').on('input', function() {
  $(this)
    .width (50)
    .height(50)
    .width (this.scrollWidth)
    .height(this.scrollHeight);
});

请注意 width 和 height 首先设置为初始值以强制滚动。

Note that width and height are first set to their initial values to force a scroll.

设置 textarea 的换行属性为off：

<textarea wrap="off"></textarea>

并将其样式设置为 overflow：hidden ：

textarea {
  overflow: hidden;
}

代码段

$('textarea').on('input', function() {
  $(this)
    .width (50)
    .height(50)
    .width (this.scrollWidth)
    .height(this.scrollHeight);
});

textarea {
  overflow: hidden;
  width: 50px;
  height: 50px;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea wrap="off" autofocus></textarea>

这篇关于动态调整textarea的宽度和高度以包含文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！