Textarea自动调整大小在每个按键上调整大小铬

我实现了一个自动扩展textarea当用户按ENTER键和最小scrollHeight大小后自动扩展textarea。Textarea自动调整大小在每个按键上调整大小铬

它适用于IE，Firefox和Opera，但不适用于Chrome。
在Chrome中textarea的是在任何按键调整（只进不出），因为当设置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/

UPDATE
我发现，当我在消防更新e.style.height狐狸/ IE /歌剧，e.scrollHeight被更新为完全相同的值：
实施例：设置80px到e.style.height，设置为80pxe.scrollHeight

然而，Chrome更新e.scrollHeight具有较高的值（4像素以上）。
实施例:: 设置80px到e.style.height，设置为84pxe.scrollHeight

这导致针对其接收EVERY按键生长4像素一个textarea！

来源

2011-12-01 Raúl Ferràs

你可以在这里得到答案。

Textarea to resize based on content length

来源

2011-12-01 13:02:03

该链接显示了实现一个文本扩展不同的方法，但没有一个类似地雷。 –

我更新了我的问题，以更好地描述主要问题 –

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

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

来源

2011-12-01 13:56:32

几个月前，我在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;

}

来源

2011-12-01 13:57:07

我会看看你的实现。谢谢 ;） –

Textarea自动调整大小在每个按键上调整大小铬

回答

相关问题