Textarea 自动调整大小在 Chrome 上的每次按键时调整大小答案

【问题标题】：Textarea auto resizer resize at every keypress on chromeTextarea 自动调整大小在 Chrome 上的每次按键时调整大小
【发布时间】：2011-12-01 12:58:37
【问题描述】：

我正在实现一个自动文本区域大小调整器，当用户按 ENTER 并在最小 scrollHeight 大小之后自动扩展文本区域。

它在 IE、Firefox 和 Opera 中运行良好，但在 Chrome 中不运行。
在 Chrome 中，文本区域在任何按键时都会调整大小（不仅是 ENTER），因为在设置 e.style.height 时它也会更改 scrollHeight（这不会发生在其他浏览器上。

我用注释标记了有问题的行：

function resize(e)
{
    e = e.target || e;
    var $e = $(e);

    console.log( 'scrollHeight:'+e.scrollHeight );
    console.log( 'style.height:'+e.style.height );

    var h = Math.min( e.scrollHeight, $e.data('textexp-max') );
    h = Math.max( h, $e.data('textexp-min') );

    if( $e.data('h')!=h )
    {
        e.style.height = "";
        e.style.height      =  h + "px"; //this changes the scrollHeight even if style.height is smaller thatn scrollHeight
        //e.style.overflow  = (e.scrollHeight > h ? "auto" : "hidden");
        $e.data('h',h);
    }
    return true;
}

在这里您可以找到完整代码：http://jsfiddle.net/NzTYd/9/

更新
我发现当我在 Firefox/IE/Opera 中更新 e.style.height 时，e.scrollHeight 会更新为完全相同的值：
例子：设置80px为e.style.height，设置为80pxe.scrollHeight

但是，Chrome 将 e.scrollHeight 更新为更高的值（多 4 像素）。
例子：：设置80px为e.style.height，设置为84pxe.scrollHeight

这会导致每收到一次按键，textarea 就会增长 4px！

【问题讨论】：

标签： javascript jquery google-chrome

【解决方案1】：

你可以在这里得到答案。

Textarea to resize based on content length

【讨论】：

该链接显示了实现 textarea 扩展器的不同方法，但没有一个与我的相似。
我更新了我的问题以更好地描述主要问题

【解决方案2】：

好的，我发现 webkit 有一个错误：http://code.google.com/p/chromium/issues/detail?id=34224

最后我解决了它，检测e.scrollHeight 是否只改变了 4 px，这是 chrome 添加的差异。
如果出现这种情况，我会从 e.style.height 中减去 4px 来修复它。

【讨论】：

【解决方案3】：

几个月前，我在 jQuery 中构建了一个自动扩展的 textarea，并在许多网站上取得了巨大成功。这并不能直接解决您的问题，但您可能会发现它很有帮助。

如果用户提供@@，则插入段落并删除多余的换行符。

我的 textarea 设置为每行 40 个字符。该行每次增加 1px 以容纳新字符。

您可以在我的网站 evikjames.com > jQuery 示例 > Expandable Textarea 上看到一个工作示例。

$(".Expandable").live("keyup", function() {
    // ADJUST ROWS ROWS
    var ThisText = $(this).val();
    var Rows = calculateRows(ThisText);
    $(this).attr("rows", Rows);

    // CALCULTE COUNTER
    var ThisTextMax = $(this).attr("max");
    if (ThisText.length > ThisTextMax) {
        ThisText = ThisText.substring(ThisText, ThisTextMax);
        $(this).val(ThisText);
        alert("You have exceeded the maximum allowable text. Revise!");
    }
    $(this).next(".Count").html(ThisText.length + "/" + ThisTextMax + " characters.");
});

var calculateRows = function calculateRows(String) {
var NumCharacters = String.length;
var NumRows = Math.ceil(NumCharacters/40);
var Match = String.match(/@@/g);
var NumParagraphs = 0;
if (Match != null) {
     NumParagraphs = String.match(/@@/g).length;
     NumRows = NumRows + NumParagraphs;
}
return NumRows;

}

【讨论】：

我会看看你的实现。谢谢;)