Created
January 30, 2014 22:44
-
-
Save bdadam/8721698 to your computer and use it in GitHub Desktop.
Adding tabs to simple textareas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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