2

当您在 facebook 中输入评论时，评论文本区域会在您输入时自动调整大小。如果你按回车，它会发布评论，如果你按 ctrl + enter，它会在调整大小时转到下一行。

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

  • 在您键入时平滑地调整文本区域的大小，如 facebook，适用于所有新浏览器

  • 可以动态调用，例如，如果通过 javascript 添加了一个新的 textarea，则可以在之后立即调用它并将其分配给该 textarea。

  • 有一个选项/功能可以忽略输入并调用回调函数，而不是发布用户在按下输入时输入的内容。

  • 当按下 ctrl + enter 时，有一个选项/功能被推送到新行。

有什么建议么？

4

1 回答 1

3

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

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>
于 2012-07-30T20:22:19.973 回答