Using tab with textarea

10Jun2011

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.

Attached code:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556

/****************************************************************************************

*   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;

}