Question

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

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

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

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

这是html：

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

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

Answer 1

您可以通过监控textarea事件中的scrollWidth和scrollHeight来动态调整input。

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

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

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

将textarea的{{1}}属性设置为“关闭”：

wrap

并将其样式设置为<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;
}

Answer 2

在javascript

中添加此内容

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

继承人http://jsfiddle.net/fayu5sh2/5/

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

动态调整textarea的宽度和高度以包含文本

2 个答案: