使用原型自动调整textarea？

Question

我目前正在为我工​​作的公司开发一个内部销售应用程序，我有一个允许用户更改收货地址的表单。

现在我觉得它看起来会更好看，如果 textarea 我用于主要地址的详细信息只会占用其中的文本区域，并自动调整大小< / strong>如果文本被更改。

有什么想法吗？亲切!!!

由XeeMez编辑：我已经修改了一点代码，因为它的行为有点奇怪，我将其更改为在keyup上激活，因为它不会考虑到的是只是键入。

resizeIt = function( ) {
  var str = $( 'iso_address' ).value;
  var cols = $( 'iso_address' ).cols;
  var linecount = 0;
  $A( str.split( "\n" ) ).each( function( l ) {
    linecount += 1 + Math.floor( l.length / cols ); // take into account long lines
  } )
  $( 'iso_address' ).rows = linecount;
};

Answer 1

这是自动调整文本区域的技术。

Uses pixel height instead of line height: more accurate handling of line wrap if a proportional font is used.
Accepts either ID or element as input
Accepts an optional max height param - useful if you'd rather not let the text area grow beyond a certain size (keep it all on-screen, avoid breaking layout, etc.)
Tested on Firefox 3 and IE6

代码：（普通的香草Javascript）

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   /* Accounts for rows being deleted, pixel value may need adjusting */
   if (text.clientHeight == text.scrollHeight) {
      text.style.height = "30px";
   }       

   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";
   }
}

演示:(使用jQuery，我现在正在输入的textarea上的目标 - 如果你安装了Firebug，将两个样本粘贴到控制台并在此页面上测试）

$("#post-text").keyup(function() 
{
  FitToContent(this, document.documentElement.clientHeight)
});

Answer 2

这是我使用的方法。 在keyup或keypress上调用expandTextArea。

var minimumTextAreaRows = 10;
function expandTextArea(event) {
    var element = event.target;
    element.rows = minimumTextAreaRows;
    while (element.clientHeight < element.scrollHeight) {
        element.rows = element.rows + 1;
    }
};

与css结合使用可防止滚动条闪烁

textarea.noscrollbar {
    overflow: hidden;
}

这也将＆＃34;收缩＆＃34;到您指定的最小尺寸。删除element.rows = minimumTextAreaRows;以使其不缩小。