May 2005
Sat, 28 May 2005
Tab_in_textarea
Ever being annoyed by not being able to type TABs (keycode 9) when editing textareas in your favorite cms? Well after some research, I seem to have found a solution - at least for the more popular browsers. If anyone has an idea how to get the current cursor position in khtml based browsers (safari, konqueror), please drop me a note.
The below was tested on the Mozilla platform and with Internet Explorer 6.0.
...
Ever being annoyed by not being able to type TABs (keycode 9) when editing textareas in your favorite cms? Well after some research, I seem to have found a solution - at least for the more popular browsers. If anyone has an idea how to get the current cursor position in khtml based browsers (safari, konqueror), please drop me a note.
The below was tested on the Mozilla platform and with Internet Explorer 6.0.
...
<script type="text/javascript">
<!--
/**
* Insert a tab at the current text position in a textarea
* Jan Dittmer, jdittmer@ppp0.net, 2005-05-28
* Inspired by http://www.forum4designers.com/archive22-2004-9-127735.html
* Tested on:
* Mozilla Firefox 1.0.3 (Linux)
* Mozilla 1.7.8 (Linux)
* Epiphany 1.4.8 (Linux)
* Internet Explorer 6.0 (Linux)
* Does not work in:
* Konqueror (no tab inserted, but focus stays)
*/
function insertTab(event,obj) {
var tabKeyCode = 9;
if (event.which) // mozilla
var keycode = event.which;
else // ie
var keycode = event.keyCode;
if (keycode == tabKeyCode) {
if (event.type == "keydown") {
if (obj.setSelectionRange) {
// mozilla
var s = obj.selectionStart;
var e = obj.selectionEnd;
obj.value = obj.value.substring(0, s) +
"\t" + obj.value.substr(e);
obj.setSelectionRange(s + 1, s + 1);
obj.focus();
} else if (obj.createTextRange) {
// ie
document.selection.createRange().text="\t"
obj.onblur = function() { this.focus(); this.onblur = null; };
} else {
// unsupported browsers
}
}
if (event.returnValue) // ie ?
event.returnValue = false;
if (event.preventDefault) // dom
event.preventDefault();
return false; // should work in all browsers
}
return true;
}
//-->
</script>
<textarea onkeydown="return insertTab(event,this);"
onkeyup="return insertTab(event,this);"
onkeypress="return insertTab(event,this);"
rows="30" cols="80">
</textarea>
Demo:posted at 00:00 | path: /web | permanent link to this entry
