bdadam/example.html

## example.html
<!doctype html>
<html>
<head>
    <meta name="charset" content="utf-8"/>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="author" content="Adam Beres-Deak"/>
    <meta name="viewport" content="width=device-width"/>
    <style>
    	body {
    		padding: 40px;
    	}
    	textarea {
    		width: 100%;
    		height: 350px;
    		font-family: CourierNew, Courier;
    	}
    </style>
</head>
<body>
	<textarea id="tx"></textarea>
	<script>
	function enableTab(id) {
		var shiftPressed = false;
		var ctrlPressed = false;
		var tabChar = '    ';

		function checkSpecialKeys(e) {
			switch(e.keyCode) {
				case 16:
					shiftPressed = !shiftPressed;
					break;
				case 17:
					ctrlPressed = !ctrlPressed;
			}
		}

		document.addEventListener('keydown', checkSpecialKeys);
		document.addEventListener('keyup', checkSpecialKeys);

		function addTab(textarea) {
			// caching some values, because they are changing as text changes
            var value = textarea.value,
                start = textarea.selectionStart,
                end = textarea.selectionEnd;

            // adding tab character to actual cursor position
            textarea.value = value.substring(0, start) + tabChar + value.substring(end);

            // putting cursor back to its original position
            textarea.selectionStart = textarea.selectionEnd = start + tabChar.length;
		}

		function removeTab(textarea) {
			var curPos = textarea.selectionStart,
				lines = textarea.value.split('\n'),
				newValue = '',
				done = false,
				cnt = 0;

			for (var i = 0, l = lines.length; i < l; i++) {
				// iterating through each line
				var line = lines[i];
				cnt += line.length;
				if (cnt >= curPos && !done) {
					// cursor is in this line
					var newLine = line.replace(new RegExp('^' + tabChar, ''), '');

					if (newLine !== line) {
						// there was a tab at the beginning of the line, replace was succesfull, cursor must be moved backwards some
						line = newLine;
						curPos -=tabChar.length;
					}

					done = true; // only one substitution per run
				}

				newValue += line + '\n';
			}

			// setting new value
			textarea.value = newValue;

			// putting cursor back to its original position
			textarea.selectionStart = textarea.selectionEnd = curPos;
		}

	    var textArea = document.getElementById(id);
	    textArea.addEventListener('keydown', function(e) {
	        if (e.keyCode === 9) {

	        	if (!shiftPressed) {
	            	addTab(this);
	            } else {
	            	removeTab(this);
	            }

	            return false; // preventing losing focus
	        }
	    });
	}

	enableTab('tx');
	</script>
</body>
	<!doctype html>
	<html>
	<head>
	<meta name="charset" content="utf-8"/>
	<title></title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="author" content="Adam Beres-Deak"/>
	<meta name="viewport" content="width=device-width"/>
	<style>
	body {
	padding: 40px;
	}
	textarea {
	width: 100%;
	height: 350px;
	font-family: CourierNew, Courier;
	}
	</style>
	</head>
	<body>
	<textarea id="tx"></textarea>
	<script>
	function enableTab(id) {
	var shiftPressed = false;
	var ctrlPressed = false;
	var tabChar = ' ';

	function checkSpecialKeys(e) {
	switch(e.keyCode) {
	case 16:
	shiftPressed = !shiftPressed;
	break;
	case 17:
	ctrlPressed = !ctrlPressed;
	}
	}

	document.addEventListener('keydown', checkSpecialKeys);
	document.addEventListener('keyup', checkSpecialKeys);

	function addTab(textarea) {
	// caching some values, because they are changing as text changes
	var value = textarea.value,
	start = textarea.selectionStart,
	end = textarea.selectionEnd;

	// adding tab character to actual cursor position
	textarea.value = value.substring(0, start) + tabChar + value.substring(end);

	// putting cursor back to its original position
	textarea.selectionStart = textarea.selectionEnd = start + tabChar.length;
	}

	function removeTab(textarea) {
	var curPos = textarea.selectionStart,
	lines = textarea.value.split('\n'),
	newValue = '',
	done = false,
	cnt = 0;

	for (var i = 0, l = lines.length; i < l; i++) {
	// iterating through each line
	var line = lines[i];
	cnt += line.length;
	if (cnt >= curPos && !done) {
	// cursor is in this line
	var newLine = line.replace(new RegExp('^' + tabChar, ''), '');

	if (newLine !== line) {
	// there was a tab at the beginning of the line, replace was succesfull, cursor must be moved backwards some
	line = newLine;
	curPos -=tabChar.length;
	}

	done = true; // only one substitution per run
	}

	newValue += line + '\n';
	}

	// setting new value
	textarea.value = newValue;

	// putting cursor back to its original position
	textarea.selectionStart = textarea.selectionEnd = curPos;
	}

	var textArea = document.getElementById(id);
	textArea.addEventListener('keydown', function(e) {
	if (e.keyCode === 9) {

	if (!shiftPressed) {
	addTab(this);
	} else {
	removeTab(this);
	}

	return false; // preventing losing focus
	}
	});
	}

	enableTab('tx');
	</script>
	</body>