文本区域自动调整大小调整在每一个按键上的铬

Textarea auto resizer resize at every keypress on chrome

本文关键字：调整 每一个 区域 文本      更新时间：2023-09-26

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

它在IE、Firefox和Opera中运行良好，但在Chrome中不行。
在Chrome中，文本区域在任何按键(不只是ENTER)调整大小，因为当设置e.s yle.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与更高的值(多4px)。
例如::设置80px为e.style.height，设置为84px e.scrollHeight

这会导致文本区域每按一次键就增长4px !

你可以在这里找到答案。

Textarea根据内容长度调整大小

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

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

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

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

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

你可以在我的网站evikjames.com上看到一个工作的例子> jQuery examples> 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;

}

相关文章：