Skip to content

Instantly share code, notes, and snippets.

@bdadam bdadam/example.html
Created Jan 30, 2014

Embed
What would you like to do?
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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.