Using tab with textarea

June 10, 2011

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 😀 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 : beije.fi
* 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;
}

Tags