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

Question

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

我已被修改给定的代码在这里：http://alistapart.com/article/expanding-text-areas-made-elegant和已经得到了这一点（在的jsfiddle示出）：http://jsfiddle.net/fayu5sh2/2/

它目前的工作方式是，textarea的被设定为100％的宽度和高度div，它的内容被送入一个隐藏的跨度，它改变了高度（当按下输入时）和包含div的宽度。跨度正确运行时，textarea不保持宽度：100％。是否有可能做到这一点？

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

下面是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

在JavaScript

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

添加此

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

如果你有比这些网页上多了一个，你需要使用ID或类，而不是一般的“跨度”和“文本区域”的

Answer 2

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

此代码大小调整所有textarea s，而保持的50像素的最小宽度和高度：

$('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'); 
}); 

注意width和height首先设置为0以强制滚动。

设置textarea的wrap属性设置为 “关”：

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

，并设置其风格overflow:hidden：

textarea { 
    overflow:hidden; 
} 

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