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

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.