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

标签 javascript jquery textarea

当您在 Facebook 中输入评论时,评论文本区域会根据您的输入自动调整大小。如果您按 Enter 键,它会发布评论,如果您按 Ctrl + Enter 键,它会在调整大小时转到下一行。

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

  • 在您键入时平滑地调整文本区域大小,就像 Facebook 一样,适用于所有新浏览器

  • 能够动态调用,例如,如果通过 javascript 添加新的文本区域,则可以在该文本区域之后立即调用它并将其分配给该文本区域。

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

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

有什么建议吗?

最佳答案

我不知道是否已经存在这样的插件,但如果您没有找到,您可以制作自己的插件。我很快就想出了这个,也许你可以使用它作为起始模板(它绝不是完美的,也不是你需要的一切):

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>

关于javascript - 寻找类似于 facebook 的文本区域调整大小插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11724767/

相关文章:

javascript - 在js中重新启用对键盘的访问

javascript - 如何在angular 2和primeng中为下拉多选设置默认值

php - 在页面中限制服务器请求

javascript - 使用时间刻度为第一个和最后一个数据点创建填充

javascript - Selenium IDE 在 javascript 命令中使用存储变量

html - 包括具有相同样式的文本区域

javascript - Angular什么时候设置$watches?

jQuery Popbox 问题

javascript - 从一组单选按钮中获取 ID 值

python - 从 Flask 中的文本区域检索文本