Javascript 正在寻找一个类似facebook的文本区域大小调整插件_Javascript_Jquery_Textarea

Javascript 正在寻找一个类似facebook的文本区域大小调整插件

javascript jquery

Javascript 正在寻找一个类似facebook的文本区域大小调整插件,javascript,jquery,textarea,Javascript,Jquery,Textarea,当你在facebook上输入评论时，评论文本区域会随着你的输入自动调整大小。如果按enter键，它将发布注释；如果按ctrl+enter键，它将在调整大小时转到下一行我正在寻找一个javascript/jquery插件，它可以实现同样的功能当你像facebook一样在所有新浏览器中工作时，可以平滑地调整文本区域的大小可以动态调用，例如，如果通过javascript添加了一个新的textarea，则可以立即调用该textarea并将其分配给该textarea 有一个选项/功能，可以忽略en

当你在facebook上输入评论时，评论文本区域会随着你的输入自动调整大小。如果按enter键，它将发布注释；如果按ctrl+enter键，它将在调整大小时转到下一行

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

当你像facebook一样在所有新浏览器中工作时，可以平滑地调整文本区域的大小
可以动态调用，例如，如果通过javascript添加了一个新的textarea，则可以立即调用该textarea并将其分配给该textarea
有一个选项/功能，可以忽略enter并调用回调函数，而不是发布用户在按enter键时键入的内容
有一个选项/功能，当按下ctrl+enter时，该选项/功能将被推送到新行

有什么建议吗？

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


（函数（$）{
$.fn.smartText=函数（选项）{
var$this=$（this）；
var默认值={
大小间隔：15
};
var设置=$.extend（{}，默认值，选项）；
$（'body'）。追加（''）；
var checkValHeight=$（“#checkValHeight”）；
$this.each（函数（）{
$this.addClass（'smartText'）；
});
$（'textarea.smartText'）.live（'keyup paste'，function（））{
var$this=$（this）；
var cur_height=$this.height（）；
格子高度
.css({
“宽度”：$this.width（）
})
.html（$this.val（））；
如果（选中valheight.height（）>当前高度）{
$this.css({
“高度”：（当前高度+设置。大小间隔）+“px”
});
}
checkValHeight.empty（）；
});
退还$this；
}
})（jQuery）；
$（函数（）{
$（'textarea'）.smartText({
大小间隔：30
});
$（'#addTextArea'）。单击（函数（）{
$（'body'）。追加（''）；
返回false；
});
});

不错，它可以工作，但似乎有点问题。1）如果将事件设置为keypress而不是keyup，则有时在键入时，您还没有到达行的末尾，当它跳到最后一行时，您已经走到了一半。可能是因为我按住键，所以html（）有一些旧值，而不是新值。。2）有时，您移动到下一行并获得一个滚动条，然后必须在滚动条消失之前再键入一点。有什么想法吗？@ClickUp投票支持#2你可以用css

textarea.smartText{overflow:hidden；}

修复。对于#1，如果您按住同一个键，则它将等待您松开，然后将文本插入隐藏div以计算文本的高度值。所以它不会实时更新textarea的高度。无论如何，我同意整个脚本都有很多问题，我花了大约10分钟在上面：）你应该改进它，如果你这样做的话，甚至可以将它作为插件发布。谢谢#2:）。如果您将事件从keyup更改为keypress，则它会实时更新事件，但是对于某些行，当您在一行中走到一半时，它会扩展。。我想你可能比我更能修复那个特定的bug

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