2

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

现在我认为它看起来会更好，如果我用于主要地址详细信息的textarea只会占用其中的文本区域，并且如果文本发生更改则自动调整大小。

在此处输入图像描述

有任何想法吗？亲切！！！

由 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;
};
4

2 回答 2

3

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

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，我现在正在输入的文本区域上的目标 - 如果您安装了 Firebug，请将两个示例粘贴到控制台并在此页面上进行测试）

$("#post-text").keyup(function() 
{
  FitToContent(this, document.documentElement.clientHeight)
});
于 2013-06-20T06:37:28.877 回答
0

这是我使用的方法。在 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;
}

这也将“缩小”到您指定的最小尺寸。取下element.rows = minimumTextAreaRows;使其不收缩。

于 2014-12-01T10:57:22.590 回答