tab key emulation

TlcAndres · 03-23-2008, 01:13 AM

Basically what I'd like to achieve is when a user hits the tab key within a textarea it actually tabs out, I'm not much for javascript and I've tried researching and only came up with looking out for the key event 9 using windows.event or the netscape equivalent.

DeMo · 03-23-2008, 02:10 AM

Hmmmm maybe you could insert a certain number of spaces when the user presses TAB?

Anyway, I think it's a little annoying too.
Everytime I'm writing a piece of code here in the forums I always press TAB to try to indent the code.

xenon · 03-23-2008, 11:55 AM

You basically need to overwrite the default command for the TAB key inside that textarea only (e.g. if the textarea is focused). I think you can easily insert a \t and a tab space will appear (it works with newlines, so it *should* work with tabs, as well). It's better to test first, though, just in case

sidisinsane · 03-23-2008, 01:26 PM

Hi Andres,
this script I found a while ago should help. It's not very nice code and it's also not unobtrusive, but it should work with most browsers.

Code:

<html>

<head>

<script type="text/javascript">
/* 
A function to capture a tab keypress in a textarea and insert 4 spaces and NOT change focus originally by Greg Pinero.
Source: http://www.answermysearches.com/here-is-how-to-make-the-tab-work-in-a-textarea-javascript/265/
*/

function enable_tab(e,el)
{
	// 9 is the tab key, except maybe it's 25 in Safari? oh well for them ...
    if(e.keyCode==9)
    {
		// So the scroll won't move after a tabbing
		var oldscroll = el.scrollTop;
		// This doesn't seem to help anything, maybe it helps for IE
        e.returnValue=false;
        // Check if we're in a firefox deal
		if (el.setSelectionRange)
		{
			var pos_to_leave_caret=el.selectionStart+4;
			// Put in the tab
			el.value = el.value.substring(0,el.selectionStart) + '    ' + el.value.substring(el.selectionEnd,el.value.length);
            // There's no easy way to have the focus stay in the textarea, below seems to work though
			setTimeout("var t=document.getElementById('tab'); t.focus(); t.setSelectionRange(" + pos_to_leave_caret + ", " + pos_to_leave_caret + ");", 0);
		}else{
			// IE code, pretty simple really
			document.selection.createRange().text='    ';
		}
		// Put back the scroll
        el.scrollTop = oldscroll;
	}
}
</script>

</head>


<body>

<textarea name="tab" id="tab" onkeydown="enable_tab(event,document.getElementById('tab'))"></textarea>

</body>

</html>

ETbyrne · 03-25-2008, 01:58 AM

That's a good find you have there sidisinsane, the only problem is it adds spaces, not tabs. You can easily fix this though by switching out a few lines:

Code:

<html>

<head>

<script type="text/javascript">
/* 
A function to capture a tab keypress in a textarea and insert 4 spaces and NOT change focus originally by Greg Pinero.
Source: http://www.answermysearches.com/here-is-how-to-make-the-tab-work-in-a-textarea-javascript/265/
*/

function enable_tab(e,el)
{
	// 9 is the tab key, except maybe it's 25 in Safari? oh well for them ...
    if(e.keyCode==9)
    {
		// So the scroll won't move after a tabbing
		var oldscroll = el.scrollTop;
		// This doesn't seem to help anything, maybe it helps for IE
        e.returnValue=false;
        // Check if we're in a firefox deal
		if (el.setSelectionRange)
		{
			var pos_to_leave_caret=el.selectionStart+4;
			// Put in the tab
			el.value = el.value.substring(0,el.selectionStart) + "\t" + el.value.substring(el.selectionEnd,el.value.length);
            // There's no easy way to have the focus stay in the textarea, below seems to work though
			setTimeout("var t=document.getElementById('tab'); t.focus(); t.setSelectionRange(" + pos_to_leave_caret + ", " + pos_to_leave_caret + ");", 0);
		}else{
			// IE code, pretty simple really
			document.selection.createRange().text="\t";
		}
		// Put back the scroll
        el.scrollTop = oldscroll;
	}
}
</script>

</head>


<body>

<textarea name="tab" id="tab" onkeydown="enable_tab(event,document.getElementById('tab'))"></textarea>

</body>

</html>

All I did was change the ' ' things to "\t"

Nor · 03-25-2008, 04:13 PM

I say its nicer with the JQuery manipulation of the regular keycodes ;)

ETbyrne · 03-25-2008, 10:46 PM

True, but the minified version of jquery.js is over 58 KB. This is only 1.5 KB including all of the HTML. It really depends on if you are doing just this or if you are also using jquery for something else on the same page (and or site).

Nor · 03-26-2008, 08:10 PM

Very True ;)

TlcAndres · 03-26-2008, 09:25 PM

Forgot to mention...I took the above script and modified (it was creating tabs and kept on going to the next button). Works a charm now - thanks!

sidisinsane · 04-08-2008, 06:39 AM

Quote:

Originally Posted by TlcAndres

Forgot to mention...I took the above script and modified (it was creating tabs and kept on going to the next button). Works a charm now - thanks!

Can you post your modification?

TlcAndres · 04-11-2008, 08:30 PM

Quote:

The only downside is it works when ever it presses tab but thats the only version, the new one just has the addons to see if it's focused on the textbox