stackoverflow: How do I create an expanding textbox?
http://stackoverflow.com/questions/21104199/how-do-i-create-an-expanding-textbox
HTML
<h3>Expanding Textarea Example</h3>
<h5>From <a href="http://bgrins.github.io/ExpandingTextareas">http://bgrins.github.io/ExpandingTextareas</a></h5>
<textarea id="mytext" class="expanding"></textarea>
CSS
textarea, .textareaClone {
width: 500px;
}
JavaScript
// Expanding Textareas
// https://github.com/bgrins/ExpandingTextareas
(function(factory) {
// Add jQuery via AMD registration or browser globals
if (typeof define === 'function' && define.amd) {
define([ 'jquery' ], factory);
}
else {
factory(jQuery);
}
}(function ($) {
$.expandingTextarea = $.extend({
autoInitialize: true,
initialSelector: "textarea.expanding",
opts: {
resize: function() { }
}
}, $.expandingTextarea || {});
var cloneCSSProperties = [
'lineHeight', 'textDecoration', 'letterSpacing',
'fontSize', 'fontFamily', 'fontStyle',
'fontWeight', 'textTransform', 'textAlign',
'direction', 'wordSpacing', 'fontSizeAdjust',
'wordWrap', 'word-break',
'borderLeftWidth', 'borderRightWidth',
'borderTopWidth','borderBottomWidth',
'paddingLeft', 'paddingRight',
'paddingTop','paddingBottom',
'marginLeft', 'marginRight',
'marginTop','marginBottom',
'boxSizing', 'webkitBoxSizing', 'mozBoxSizing', 'msBoxSizing'
];
var textareaCSS = {
position: "absolute",
height: "100%",
resize: "none"
};
var preCSS = {
visibility: "hidden",
border: "0 solid"
};
var containerCSS = {
position: "relative"
};
function resize() {
$(this).closest('.expandingText').find("div").text(this.value.replace(/\r\n/g, "\n") + ' ');
$(this).trigger("resize.expanding");
}
$.fn.expandingTextarea = function(o) {
var opts = $.extend({ }, $.expandingTextarea.opts, o);
if (o === "resize") {
return this.trigger("input.expanding");
}
if (o === "destroy") {
this.filter(".expanding-init").each(function() {
var textarea = $(this).removeClass('expanding-init');
var container = textarea.closest('.expandingText');
...