寻找类似于facebook的文本区域大小调整插件

Question

在facebook中键入注释时，注释文本区域会在键入时自动调整大小。如果你点击enter，它会发布注释，如果你点击ctrl + enter，它会在调整大小的时候转到下一行。

我正在寻找一个实现同样功能的javascript / jquery插件。

• 调整文本区域大小，而您键入的文本区域(如facebook )在所有新浏览器中都正常工作
• 可以动态调用，例如，如果通过javascript添加了一个新的textarea，那么它就可以在该文本区域后面调用并分配给该textarea。
• 有一个选项/特性可以让enter的输入被忽略，并调用回调函数来发布用户点击enter时输入的内容。
• 当按下ctrl + enter时，将有一个选项/特性推送到新行。

有什么建议吗？

Answer 1

我不知道是否有这样的插件存在，但如果你找不到，你可以自己做。我想出了这个非常快速的，也许你可以用它作为一个开始模板(绝不是完美的或做你所需要的一切)：

http://jsfiddle.net/NfWAn/

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            (function($) {
                $.fn.smartText = function(options) {

                    var $this = $(this);

                    var defaults = {
                        size_interval : 15
                    };

                    var settings = $.extend({}, defaults, options);

                    $('body').append('<div id="checkValHeight" style="display:none; word-wrap:break-word"></div>');
                    var checkValHeight = $('#checkValHeight');

                    $this.each(function() {
                        $this.addClass('smartText');
                    });

                    $('textarea.smartText').live('keyup paste', function() {
                        var $this = $(this);
                        var cur_height = $this.height();

                        checkValHeight
                            .css({
                                'width': $this.width()
                            })
                            .html($this.val());

                        if(checkValHeight.height() > cur_height) {
                            $this.css({
                                'height': (cur_height + settings.size_interval) + 'px'
                            });
                        }

                        checkValHeight.empty();
                    });

                    return $this;
                }
            })(jQuery);
        </script>
        <script>
            $(function() {

                $('textarea').smartText({
                    size_interval: 30
                });

                $('#addTextArea').click(function() {
                    $('body').append('<textarea class="smartText"></textarea>');
                    return false;
                });
            });
        </script>
    </head>
    <body>

        <a href="#" id="addTextArea">Add Textarea [+]</a><br />

        <textarea></textarea>
        <textarea></textarea>

    </body>
</html>