jQuery - 构建一个在调整大小时不闪烁的自动调整大小文本区域

Question

我一直在努力创建一个自动调整大小的文本区域(就像在 FB 上一样)，它可以在您键入时调整大小。那里有一些插件。问题是他们都只有 99% 在那里。缺少的是:

• 调整大小时文本区域会闪烁(返回/输入时)
• 粘贴时出现延迟

请看这里:http://jsfiddle.net/uzjdC/3/

有什么想法为什么它会在调整大小时闪烁吗？输入一些文本，然后按 Enter 键查看它..

谢谢

Answer 1

雅虎!我找到了解决办法!你的例子让我非常感兴趣，that's why I decided to play around in jsFiddle to try to fix your flashing issue 。闪烁是由于 TextArea 有“太多文本”并且发生了一些滚动。 keyup 事件无法击败此滚动条，但是...scroll 事件可以!

HTML:

<textarea id="tst" rows="1" cols="40">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum porttitor neque eget consequat. Sed faucibus purus vitae felis facilisis bibendum.</textarea>

CSS:

textarea{    
    overflow:hidden;
    overflow-x:hidden;
    overflow-y:hidden;
    padding:10px;
}

为了扩大尺寸，我使用 TextArea 的 rows 属性。我已将其写入函数中: 我正在使用此函数扩大区域的大小:

//resize text area
function resizeTextArea(elem){

    elem.height(1); 
    elem.scrollTop(0);
    elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height());
}

现在我们只需要绑定(bind)调整大小即可:

//inital resize - on document load
resizeTextArea($('#tst'));

//bind events
$('#tst').bind('scroll keyup', function(){
    resizeTextArea($(this));
});

注意:不会出现闪烁!为什么？因为使用了scoll事件!您可以在这里尝试解决方案:http://jsfiddle.net/KeesCBakker/2D8Kf/

祝你好运!

编辑:更改了 jsFiddle 示例中的代码以支持动态添加文本区域的方案。 Check also this SO question .