一、
$('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(); });