Create a gist now

Instantly share code, notes, and snippets.

Adding tabs to simple textareas
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment