jQuery - 构建一个在调整大小时不闪烁的自动调整大小的 TextArea

本文介绍了jQuery - 构建一个在调整大小时不闪烁的自动调整大小的 TextArea的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

谢谢

解决方案

Yahoo!我找到了解决方案！你的例子让我很感兴趣，这就是为什么我决定在 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:

文本区域{溢出:隐藏；溢出-x:隐藏；溢出-y:隐藏；填充:10px；}

我正在用这个函数扩大区域的大小:

//调整文本区域大小函数 resizeTextArea(elem){elem.height(1);elem.scrollTop(0);elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height());}

现在我们只需要绑定resize:

//初始调整大小 - 在文档加载时resizeTextArea($('#tst'));//绑定事件$('#tst').bind('scroll keyup', function(){resizeTextArea($(this));});

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

祝你好运！

编辑:更改了 jsFiddle 示例中的代码以支持已动态添加文本区域的方案.检查这个SO问题.

I've been working to create an auto resizing textarea (like on FB) that resizes as you type. There are a few plugins out there. Problem is they all are only 99% there. What's missing is:

On Resize the textarea flashes (on return/enter)
On Paste there is a delay

Please take a look here: http://jsfiddle.net/uzjdC/3/

Any ideas why it flashes on resize? Type some text, then press Enter to see it..

Thanks

解决方案

Yahoo! I've found a solution! Your example intrigued me very much, that's why I decided to play around in jsFiddle to try to fix your flashing issue. The flashing is due to the fact that the TextArea has 'to much text' and some scrolling occurs. The keyup event isn't equipped to beat this scrollbar, but... the scroll event is!

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;
}

I'm up-sizing the area with this function:

//resize text area
function resizeTextArea(elem){

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

Now we only need to bind the resize:

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

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

Note: no flashing occurs! Why? Because the use of the scoll event! You can try the solution here: http://jsfiddle.net/KeesCBakker/2D8Kf/

Good luck!

Edit: Changed the code in the jsFiddle example to support schemes that have dynamicly added textareas. Check also this SO question.

这篇关于jQuery - 构建一个在调整大小时不闪烁的自动调整大小的 TextArea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！