Question

当您在Facebook中输入评论时，评论textarea会在您键入时自动调整大小。如果你点击回车，它会发布评论，如果你点击ctrl + enter，它会在调整大小时进入下一行。

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

在键入内容时，可以顺利调整textareas的大小，例如facebook，适用于所有新浏览器
能够动态调用，例如，如果通过javascript添加新的textarea，则可以在之后立即调用并分配给该textarea。
有一个选项/功能可以忽略输入并调用回调函数，而不是发布用户在输入时输入的内容。
按下ctrl + enter时，有一个选项/功能被推到新行。

有什么建议吗？

Answer 1

我不知道是否有任何这样的插件已经存在，但如果你找不到，你就可以制作自己的插件。我想出了这个真正的快速，再见，你可以用它作为一个起始模板（绝不是它完美或做你需要的一切）：

<!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>

正在寻找一个类似facebook的textarea resize插件

1 个答案: