Home/ Questions/Q 8308239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T18:44:40+00:00

When you’re typing a comment in facebook, the comment textarea automatically resizes as you

  • 0

When you’re typing a comment in facebook, the comment textarea automatically resizes as you type. If you hit enter, it posts the comment, and if you hit ctrl + enter, it goes to the next line while resizing.

I’m looking for a javascript / jquery plugin that achieves the same thing.

  • Resizes textareas smoothly while you type, like facebook, works in all new browsers

  • Is able to be called dynamically, e.g if a new textarea is added via javascript, its able to be called right after and assigned to that textarea.

  • Has an option/feature to have enter’s ignored and call a callback function instead for posting what the user has typed when he hits enter.

  • Has an option/feature to be pushed to the new line when ctrl + enter is pressed.

Any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t know if any such plugin already exists but if you don’t find one you can make your own. I came up with this real quick, maybye you can use it as a starting template (by no means is it perfect or does everything you need):

    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>
    • 0