Using tab with textarea

Realising that I might need the code bbcode tag, I added it to this site. But one little problem occured, you can't use tab in a browser window, if you try to tab inside a textarea, the focus will move on to the next user-interactable element.

My solution is here below, in my new code window :D Not the most elegant solution, but it does the trick.

Because html can't handle tabs per se, I chose to use spaces instead, and to make sure it doesn't break the lines when they get too long I used nbsp (non-breaking space) and to mimic the length of a normal tab I use three nbsp after each other. As you can see in the javascript I had a little problem with the spaces inside a textarea because of the strange behaviour between .innerHTML and .value, I opted instead to use the function String.fromCharCode() where 160 is the charcode for nbsp.

[left][right]Later, with php, when I write out the post, I replace all whitespaces to nbsp within the code tag, again, because I don't want the code to break into multiple lines.

To make the code more readable I also added som functionality for highlighting, comments like html-comments, block comments and end-of-line comments are automatically enclosed with a dark green span tag, while everything within single-quotes are enclosed with a greyish span tag.

This was done with some simple regexps.

I wish I could create a complete highlighter but I don't feel I've got the time nor the expertis to create such a thing.

 

/****************************************************************************************
* Project : benjaminhorn.io
* Type : random js
* File : inline
****************************************************************************************/
 
// Bind function to documents onkeydown, you could bind this directly to
// the textarea editormessage, but I've chosen to bind it to document if
// I ever want to expand the listener to multiple textareas or if I want
// to listen after other keyevents I can use the same listener.
document.onkeydown = tablistener;
 
// If editormessage gets focus or is relieved of its focus, set isfocused accordingly
// (editor message is the textarea)
getbyid('editormessage').onfocus = function() { this.isfocused = true; };
getbyid('editormessage').onblur = function() { this.isfocused = false; };
 
// Tablistener
function tablistener( e )
 
{
	// Determine correct event
	var e = e || window.event;
 
	// Determine what keycode that was entered in the event
	var key = e.keyCode || e.charCode;
 
	// if key press is tab (9) and textarea has focus
	if( key == 9 && getbyid('editormessage').isfocused == true )
	{
		// Set text to empty
		text = '';
 
		// Retrieve position
		position = getbyid('editormessage').selectionStart;
 
		// Retrieve text
		text = getbyid('editormessage').value;
 
		// Split text
		textarray = text.split('');
 
		// Create text (3 * nbsp)
		nbsp = String.fromCharCode(160)+String.fromCharCode(160)+String.fromCharCode(160);
 
		// add spaces to cursor positon
		textarray[position] = nbsp+textarray[position];
 
		// join together text
		text = textarray.join('');
 
		// Set text back to textarea
		getbyid('editormessage').value = text;
 
		// Set cursor infront of spaces
		getbyid('editormessage').selectionStart = position+3;
		getbyid('editormessage').selectionEnd = position+3;
 
		// Cancel the tab event
		return false;
	}
 
	// If the event was not a tab and / or it wasn't within the correct
	// textarea, let the event bubble on
	return true;
}
Benjamin Horn
Benjamin Horn
Developer at Bazooka
A Finnish-German full-stack developer who's worked with a multitude of different technologies throughout the years.
Vaasa, Finland