2

Facebookでコメントを入力している場合、入力するとコメントテキストエリアのサイズが自動的に変更されます。Enterキーを押すとコメントが投稿され、Ctrlキーを押しながらEnterキーを押すとサイズ変更中に次の行に移動します。

同じことを実現するjavascript/jqueryプラグインを探しています。

  • Facebookのように、入力中にテキストエリアのサイズをスムーズに変更し、すべての新しいブラウザで機能します

  • 動的に呼び出すことができます。たとえば、新しいテキストエリアがjavascriptを介して追加された場合、その直後に呼び出して、そのテキストエリアに割り当てることができます。

  • Enterキーを無視し、Enterキーを押したときにユーザーが入力した内容を投稿する代わりに、コールバック関数を呼び出すオプション/機能があります。

  • 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 に答える