The other code I found on the web was missing some functions I wanted like inserting the tab at the cursor location if in the middle of text and returning the cursor to the appropriate position instead of just sticking it at the end of the text after the tab has been inserted. Additionally I needed to scroll back to the cursor location in a textarea.
Additionally a lot of the examples seemed overly complicated. I wanted something simple so put common code in functions so reworked some of the examples I found to end up with the following:
<html>
<head>
<script type="text/javascript">
function doTab(arg1,arg2){
t=arg2
var k;
//save cursor position
var top= arg2.scrollTop;
var left= arg2.scrollLeft;
if ("which" in arg1){k=arg1.which}
else if("keyCode" in arg1){k=arg1.keyCode}
else if("keyCode" in window.event){k=window.event.keyCode }
else if ("which" in window.event){k=arg1.which}
else{return true}
//insert tab
if (k == 9) {
insertatcursor(t, "\t");
arg2.scrollTop = top;
arg2.scrollLeft = left;
return false;
}
return true
}
function insertatcursor(myField, myValue) {
//IE
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//Mozilla Firefox
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)+ myValue+ myField.value.substring(endPos, myField.value.length);
setSelRange(myField, endPos + myValue.length, endPos + myValue.length);
} else {
myField.value += myValue;
}
}
function setSelRange(inputEl, selStart, selEnd) {
if (inputEl.setSelectionRange) {
inputEl.focus();
inputEl.setSelectionRange(selStart, selEnd);
} else if (inputEl.createtextRange) {
var range = inputEl.createtextRange();
range.collapse(true);
range.moveEnd('character', selEnd);
range.moveStart('character', selStart);
range.select();
}
}
</script>
</head>
<body>
<textarea onkeydown="return doTab(event,this);"></textarea>
</body>
</html>
