工作 jQuery 自动高度文本字段插件？答案

【问题标题】：Working jQuery auto-height textfield plugin?工作 jQuery 自动高度文本字段插件？
【发布时间】：2009-07-24 04:51:43
【问题描述】：

有谁知道一个实际工作的 jQuery 插件，它可以在添加文本时正确扩展文本区域的高度？

我已经尝试过 autogrow 和 growfield 插件，但似乎都不能很好地工作。两者都存在无法正常生长和/或有时忽略最大高度的问题。我在 OSX 上使用 FF 3.5 来测试 FWIW。

在谷歌搜索中出现了第三个，但那个演示页面甚至不起作用，所以我没有费心去尝试。

【问题讨论】：

【解决方案1】：

在处理我当前的项目时，我遇到了类似的问题，就是找不到可靠、可靠的增长文本区域插件。我最终定居在了种植地，但我不能说我对它太满意了。

我遇到的一个我能够解决的问题是，growfield（除了几乎所有其他插件之外）始终坚持在文本区域中添加额外的一行。这是粗略的开发代码，目前只针对 Safari 和 Firefox，但这是我添加到 growfield 的 getDummyHeight() 函数末尾的一些代码：

if ($.browser.safari) return h-sr.lh*2+sr.pt+sr.pb;
if ($.browser.mozilla) return h-sr.lh*2+sr.pt*2+sr.pb+5;

它使用浏览器检测（这是一种不好的做法），并且可能依赖于我们的布局和 CSS，但您可以进行一些调整以使其在您的设计中正常工作。

如果您想知道（增长域有点神秘），h 指的是文本区域高度，sr.lh 指的是行高，sr.pt 指的是顶部填充，sr.pb 指的是底部填充。完整的变量列表在 prepareSizeRelated() 函数中。

【讨论】：

【解决方案2】：

和你一样，我尝试了很多 jQuery 解决方案，但最终每次都回到普通的旧 javascript。假设 jQuery 不是您的绝对要求，您可以使用类似以下的内容（需要调整 xxx 以适合您的特定文本区域，应该是 ~1.3）：

function resizeTextarea( textarea ) {
  currentRows = textarea.value.split('\n');
  newRows = 1;
  minRows = 4;

  for( i=0; i < currentRows.length; i++ ) {
    if( currentRows[i].length > textarea.cols ) {
      newRows += Math.ceil( currentRows[i].length / textarea.cols - xxx );
    }
  }

  newRows += currentRows.length;

  if( newRows != textarea.rows ) {
    textarea.rows = newRows;
  }
}

【讨论】：

【解决方案3】：

嗯，现在有了。

这个插件叫做：Autosize，

它是由 杰克·摩尔

制作的

查看here。

（我知道这个问题可以追溯到 2009 年，但也许这会对未来的读者有所帮助）

【讨论】：