jQuery - 构建一个AutoResizing TextArea,它不会在调整大小时闪烁

Question

我一直在努力创建一个自动调整大小的textarea(就像在FB上一样),在你键入时调整大小.那里有一些插件.问题是它们都只有99%.缺少的是:

• 在调整textarea闪烁的大小(返回/输入时)
• 在粘贴上有一个延迟

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

任何想法为什么它闪烁调整大小？键入一些文本,然后按Enter键查看它..

谢谢

Answer 1

雅虎 我找到了解决方案!你的例子非常引起我的兴趣,这就是为什么我决定在jsFiddle中试图解决你的闪烁问题.闪烁是由于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;
}

要进行升迁我正在使用rowsTextArea 的属性.我把它写成了一个函数:我用这个函数调整了区域的大小:

//resize text area
function resizeTextArea(elem){

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

现在我们只需要绑定resize:

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

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

注意:不会发生闪烁!为什么？因为活动的使用scoll!您可以在这里尝试解决方案:http://jsfiddle.net/KeesCBakker/2D8Kf/

祝好运!

编辑:更改了jsFiddle示例中的代码,以支持动态添加textareas的方案.检查这个问题.