deanebarker/PoorMansCodeEditor.html

## PoorMansCodeEditor.html
<!--

This is a textarea that:

(1) Is styled(-ish) like a code editor
(2) Catches tabs and converts them to four (4) spaces
(3) Duplicates leading spaces from the last line
(4) Auto-expands to input

Pure inline HTML and JavaScript. No external dependencies. Has issues pre-IE-8, but should be otherwise okay.

One rule: you need to keep the min-height and max-height in the CSS, and they must be in "px" values.

-->

<html>
    <body>
<textarea
    wrap="off"
    style="width: 100%; min-height: 200px; max-height: 1000px; font-family: monospace; padding: 10px; font-size: 12px; line-height: 16px; border-radius: 0; background-color: rgb(250,250,250); white-space: pre;"
    spellcheck="false"
    onkeydown="var tabReplacement = '    '; var keyCode = event.keyCode || event.which; if (keyCode == 9) { event.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; this.value = this.value.substring(0, start) + tabReplacement + this.value.substring(end); this.selectionEnd = start + tabReplacement.length; }"
    onkeyup="var keyCode = event.keyCode || event.which; if(keyCode == 13) { var start = this.selectionStart; var lines = this.value.substring(0, start).split(/\r?\n/); if(lines.length == 1) { return; } var lastLine = lines[lines.length - 2]; var leadingSpaces = lastLine.substring(0, lastLine.search(/\S|$/)); var end = this.selectionEnd; this.value = this.value.substring(0, start) + leadingSpaces + this.value.substring(end); this.selectionEnd = start + leadingSpaces.length; }"
    oninput="var maxHeight = this.style.maxHeight.replace('px',''); var minHeight = this.style.minHeight.replace('px',''); var newHeight = Math.max(this.scrollHeight, minHeight); newHeight = Math.min(newHeight, maxHeight); this.style.height = newHeight + 'px';"/></textarea>	</body>
</html>
	<!--

	This is a textarea that:

	(1) Is styled(-ish) like a code editor
	(2) Catches tabs and converts them to four (4) spaces
	(3) Duplicates leading spaces from the last line
	(4) Auto-expands to input

	Pure inline HTML and JavaScript. No external dependencies. Has issues pre-IE-8, but should be otherwise okay.

	One rule: you need to keep the min-height and max-height in the CSS, and they must be in "px" values.

	-->

	<html>
	<body>
	<textarea
	wrap="off"
	style="width: 100%; min-height: 200px; max-height: 1000px; font-family: monospace; padding: 10px; font-size: 12px; line-height: 16px; border-radius: 0; background-color: rgb(250,250,250); white-space: pre;"
	spellcheck="false"
	onkeydown="var tabReplacement = ' '; var keyCode = event.keyCode \|\| event.which; if (keyCode == 9) { event.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; this.value = this.value.substring(0, start) + tabReplacement + this.value.substring(end); this.selectionEnd = start + tabReplacement.length; }"
	onkeyup="var keyCode = event.keyCode \|\| event.which; if(keyCode == 13) { var start = this.selectionStart; var lines = this.value.substring(0, start).split(/\r?\n/); if(lines.length == 1) { return; } var lastLine = lines[lines.length - 2]; var leadingSpaces = lastLine.substring(0, lastLine.search(/\S\|$/)); var end = this.selectionEnd; this.value = this.value.substring(0, start) + leadingSpaces + this.value.substring(end); this.selectionEnd = start + leadingSpaces.length; }"
	oninput="var maxHeight = this.style.maxHeight.replace('px',''); var minHeight = this.style.minHeight.replace('px',''); var newHeight = Math.max(this.scrollHeight, minHeight); newHeight = Math.min(newHeight, maxHeight); this.style.height = newHeight + 'px';"/></textarea> </body>
	</html>