jymz
一、
$(\'textarea\').keyup(function () { $(this).height(this.scrollHeight); });
效果一般

二、
https://github.com/alexdunphy/flexText

<div class="flex-text-wrap">
  <pre>
    <span></span>
    <br>
    <br>
  </pre>
  <textarea id="content" placeholder="Type/paste/shout content…"></textarea>
</div>

.flex-text-wrap {
    position: relative;

    *zoom: 1;
}

textarea,
.flex-text-wrap {
    outline: 0;
    margin: 0;
    border: none;
    padding: 0;

    *padding-bottom: 0 !important;
}

.flex-text-wrap textarea,
.flex-text-wrap pre {
    white-space: pre-wrap;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    *white-space: pre;
    *word-wrap: break-word;
}

.flex-text-wrap textarea {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    resize: none;

    /* IE7 box-sizing fudge factor */
    *height: 94%;
    *width: 94%;
}

.flex-text-wrap pre {
    display: block;
    visibility: hidden;
}

textarea,
.flex-text-wrap pre {
    /*
     * Add custom styling here
     * Ensure that typography, padding, border-width (and optionally min-height) are identical across textarea & pre
     */
}
;(function ($) {

    // Constructor
    function FT(elem) {
        this.$textarea = $(elem);

        this._init();
    }

    FT.prototype = {
        _init: function () {
            var _this = this;

            // Insert wrapper elem & pre/span for textarea mirroring
            this.$textarea.wrap(\'<div class="flex-text-wrap" />\').before(\'<pre><span /><br /><br /></pre>\');

            this.$span = this.$textarea.prev().find(\'span\');

            // Add input event listeners
            // * input for modern browsers
            // * propertychange for IE 7 & 8
            // * keyup for IE >= 9: catches keyboard-triggered undos/cuts/deletes
            // * change for IE >= 9: catches mouse-triggered undos/cuts/deletions (when textarea loses focus)
            this.$textarea.on(\'input propertychange keyup change\', function () {
                _this._mirror();
            });

            // jQuery val() strips carriage return chars by default (see http://api.jquery.com/val/)
            // This causes issues in IE7, but a valHook can be used to preserve these chars
            $.valHooks.textarea = {
                get: function (elem) {
                    return elem.value.replace(/\r?\n/g, "\r\n");
                }
            };

            // Mirror contents once on init
            this._mirror();
        }

        // Mirror pre/span & textarea contents
        ,_mirror: function () {
            this.$span.text(this.$textarea.val());
        }
    };

    // jQuery plugin wrapper
    $.fn.flexText = function () {
        return this.each(function () {
            // Check if already instantiated on this elem
            if (!$.data(this, \'flexText\')) {
                // Instantiate & store elem + string
                $.data(this, \'flexText\', new FT(this));
            }
        });
    };

})(jQuery);

调用:

$(function () {
    $(\'textarea\').flexText();
});
 

分类:

技术点:

相关文章: