动态调整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.

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

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/

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

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设置为div的100％宽度和高度，并将其内容输入隐藏的跨度，这会改变高度（按下enter时）和包含div的宽度。当跨度正确运行时，textarea不保持宽度：100％。是否有可能做到这一点？

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.

隐藏的跨度当前可见以显示其内容正在执行的操作，文本区域中的文本应直接位于跨度中的文本顶部。

Here is the html:

这是html：

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

Here is the javascript:

这是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');
        });    
    }
);

and the CSS:

和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; */
}

2 个解决方案

#1

You can make a textarea dynamically resize by monitoring its scrollWidth and scrollHeight in a keyup event.

您可以通过在keyup事件中监视其scrollWidth和scrollHeight来动态调整textarea的大小。

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

此代码调整所有textareas的大小，同时保持最小宽度和高度为50px：

$('textarea').on('keyup',function() {
  $(this).css('width','0px');
  $(this).css('height','0px');
  $(this).css('width',Math.max(50,this.scrollWidth)+'px');
  $(this).css('height',Math.max(50,this.scrollHeight)+'px');
});

Note that width and height are first set to 0 to force a scroll.

请注意，宽度和高度首先设置为0以强制滚动。

Set the textarea's wrap attribute to "off":

将textarea的wrap属性设置为“off”：

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

And set its style to overflow:hidden:

并将其样式设置为溢出：隐藏：

textarea {
  overflow:hidden;
}

Fiddle at http://jsfiddle.net/aj9tarnu/

小提琴在http://jsfiddle.net/aj9tarnu/

#2

Add this in the javascript

在javascript中添加此项

$('textarea').on('keyup',function(){
  var spanwidth = $('span').css('width')
  $('textarea').css('width',spanwidth) 
})

Heres the fiddle http://jsfiddle.net/fayu5sh2/5/

继承人小提琴http://jsfiddle.net/fayu5sh2/5/

If you have more than one of these on the page, you'll need to use IDs or Classes instead of the general 'span' and 'textarea'

如果您在页面上有多个这样的内容，则需要使用ID或类而不是一般的“span”和“textarea”

#1