Question

我正在实现一个自动textarea缩放器，当用户按下ENTER并在最小scrollHeight大小之后自动扩展textarea。

它适用于IE，Firefox和Opera，但不适用于Chrome 在Chrome中，textarea在任何按键时都会调整大小（不仅仅是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，设置为 80px e.scrollHeight

但是，Chrome更新e.scrollHeight的价值更高（4倍以上）例：：设置 80px 至e.style.height，设置为 84px e.scrollHeight

这会导致textarea为其收到的每个按键增长4px！

Answer 1

你可以在这里得到答案。

Textarea to resize based on content length

Answer 2

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

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

Answer 3

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

如果用户提供了@@，则会插入段落并删除额外的换行符。

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

您可以在我的网站evikjames.com上看到一个有效的示例＆gt; jQuery示例＆gt;可扩展的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;

}

Textarea自动缩放器可在每次按键时调整大小

3 个答案: