dongerardor/Text area auto height

## Text area auto height
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Textarea</title>
	<script src='http://code.jquery.com/jquery-2.1.4.min.js'></script>
	<script src='chance.js'></script>
	<script type="text/javascript">
		$(function(){

			function makeExpandingArea(container) {

				var area = container.querySelector('textarea');
				var span = container.querySelector('span');
			 	if (area.addEventListener) {
			   		area.addEventListener('input', function() {
			     		span.textContent = area.value;
			   		}, false);

			   		span.textContent = area.value;
			 	} else if (area.attachEvent) {
			   		// IE8 compatibility
			   		area.attachEvent('onpropertychange', function() {
			     		span.innerText = area.value;
			   		});
			   		span.innerText = area.value;
			 	}

				// Enable extra CSS
				$(container).addClass('active');
			}

			var areas = document.querySelectorAll('.expandingArea');

			var l = areas.length;

			while (l--) {
				areas[l].querySelector('textarea').value = fillWithFakeText();
				makeExpandingArea(areas[l]);
			}
		})


		function fillWithFakeText(){
			return chance.paragraph();
		}

	</script>

	<style>
		textarea,
		pre {
			margin: 0;
			padding: 0;
			outline: 0;
			border: 0;
		}

		.expandingArea {
			position: relative;
			background: #fff;
			width: 50%;
			/* border: 1px solid #888; */
		}

		.expandingArea > textarea,
		.expandingArea > pre {
			padding: 5px;
			background: transparent;
			font: 400 13px/16px helvetica, arial, sans-serif;
			/* Make the text soft-wrap */
			white-space: pre-wrap;
			word-wrap: break-word;
		}

		.expandingArea > textarea {
			/* The border-box box model is used to allow
			 * padding whilst still keeping the overall width
			 * at exactly that of the containing element.
			 */
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
			    -ms-box-sizing: border-box;
			        box-sizing: border-box;
			width: 100%;
			/* This height is used when JS is disabled */
			height: 100px;
		}

		.expandingArea.active > textarea {
			/* Hide any scrollbars */
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			/* Remove WebKit user-resize widget */
			resize: none;
		}

		.expandingArea > pre {
			display: none;
		}

		.expandingArea.active > pre {
			display: block;
			/* Hide the text; just using it for sizing */
			visibility: hidden;
		}

	</style>

</head>
<body>
	<div class="expandingArea">
		<pre><span></span><br></pre>
		<textarea></textarea>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Textarea</title>
	<script src='http://code.jquery.com/jquery-2.1.4.min.js'></script>
	<script src='chance.js'></script>
	<script type="text/javascript">
	$(function(){

	function makeExpandingArea(container) {

	var area = container.querySelector('textarea');
	var span = container.querySelector('span');
	if (area.addEventListener) {
	area.addEventListener('input', function() {
	span.textContent = area.value;
	}, false);

	span.textContent = area.value;
	} else if (area.attachEvent) {
	// IE8 compatibility
	area.attachEvent('onpropertychange', function() {
	span.innerText = area.value;
	});
	span.innerText = area.value;
	}

	// Enable extra CSS
	$(container).addClass('active');
	}

	var areas = document.querySelectorAll('.expandingArea');

	var l = areas.length;

	while (l--) {
	areas[l].querySelector('textarea').value = fillWithFakeText();
	makeExpandingArea(areas[l]);
	}
	})


	function fillWithFakeText(){
	return chance.paragraph();
	}

	</script>

	<style>
	textarea,
	pre {
	margin: 0;
	padding: 0;
	outline: 0;
	border: 0;
	}

	.expandingArea {
	position: relative;
	background: #fff;
	width: 50%;
	/* border: 1px solid #888; */
	}

	.expandingArea > textarea,
	.expandingArea > pre {
	padding: 5px;
	background: transparent;
	font: 400 13px/16px helvetica, arial, sans-serif;
	/* Make the text soft-wrap */
	white-space: pre-wrap;
	word-wrap: break-word;
	}

	.expandingArea > textarea {
	/* The border-box box model is used to allow
	* padding whilst still keeping the overall width
	* at exactly that of the containing element.
	*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	/* This height is used when JS is disabled */
	height: 100px;
	}

	.expandingArea.active > textarea {
	/* Hide any scrollbars */
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	/* Remove WebKit user-resize widget */
	resize: none;
	}

	.expandingArea > pre {
	display: none;
	}

	.expandingArea.active > pre {
	display: block;
	/* Hide the text; just using it for sizing */
	visibility: hidden;
	}

	</style>

	</head>
	<body>
	<div class="expandingArea">
	<pre><span></span><br></pre>
	<textarea></textarea>
	</div>
	</body>
	</html>
No results found