JavaScript Forum

**NullPointer** · 05-11-2009, 07:09 PM

I'm trying to prevent the tab key for removing focus from a text field and instead insert the tab character. So far I've been able to insert the tab character when tab is pressed, but the text field still loses focus. This is what I have so far:

Code:

function tabKeyDown(obj)
{
    if (event.keyCode == 9 && event.srcElement == obj)
    {
        obj.selection = document.selection.createRange();
        obj.selection.text = String.fromCharCode(tabKeyCode);
        //What now?
    }
}

What can I do to either prevent focus from being lost, or return focus to the text area (and preferably return the cursor to the correct position).

**wayfarer07** · 05-11-2009, 08:20 PM

You should be able to use the focus method: http://www.w3schools.com/HTMLDOM/met_text_focus.asp . It works on any text field or for input.

**NullPointer** · 08:52 PM

Quote:

Originally Posted by wayfarer07

You should be able to use the focus method: http://www.w3schools.com/HTMLDOM/met_text_focus.asp . It works on any text field or for input.

I already tried

Code:

function tabKeyDown(obj)
{
    if (event.keyCode == 9 && event.srcElement == obj)
    {
        obj.selection = document.selection.createRange();
        obj.selection.text = String.fromCharCode(tabKeyCode);

        obj.focus();
    }
}

but that didn't work. I'm thinking this is because the function is triggered before the tab key event moves focus to the next field. I'm using onkeydown to call the function (~~I'll try right now with onkeyup~~ with onkeyup it doesn't work at all).

Also, if I call focus() on the text field, where will the cursor be set?

**wayfarer07** · 05-11-2009, 10:19 PM

Focus will cause the cursor to be set on the text field that it has been called on, at the end of any text that exists in that field. Focus is naturally brought on or removed by either tabbing to or clicking on various fields.

Try returning false from the tab key function, to see if that stops the default action from happening. Probably won't work, but it's worth a shot. This works for submit and click events, though I'm not sure about key events.

**NullPointer** · 05-11-2009, 10:27 PM

Returning false didn't work either.

I can hack something together that would cause focus to return to the text field, but I would prefer it if I could prevent focus from being removed from the field, as I need to cursor to remain where it is (ie if someone hits tab in the middle of some text I want a tab to be inserted and I don't want the cursor to jump to the end of the text).

Thanks for trying.
EDIT: Remind me to give you some TP later.... apparently I need to spread it around some more.

**wayfarer07** · 10:40 PM

Hmmm.... I'm not sure about moving the cursor, I've never actually tried to do that. There may be a way to do it in some browsers, but I've never investigated.

It brings up interesting questions. I'm sure you'll figure out something. It sounds like stopping the default action is definitely the thing to do.

I was browsing around while I was writing this reply, and found this: http://www.dynamicdrive.com/forums/s...ad.php?t=44468 Maybe it will help, though I barely glanced at it

Off to bed for me...

**NullPointer** · 10:47 PM

I figured it out:

Code:

<script language="javascript">
function addListener(){document.getElementById('content').addEventListener('keypress', InsertTab, true);}
function InsertTab(e){
	if (e.keyCode==9){
		e.preventDefault()
		obj = document.getElementById('content');
		obj.selection = document.selection.createRange();
                obj.selection.text = String.fromCharCode(9);
		e.stopPropagation();
	}
}
</script>

and in the <body> tag add onload="addlistener()"

**wayfarer07** · 05-12-2009, 10:23 AM

Not going to work for IE though, since it doesn't use the WC3 event model (even IE8 doesn't). You could jQuery it, or use any framework, or try to follow the original event model: otherwise you'll need to make an alternative script for the Microsoft model.

**NullPointer** · 11:53 AM

Actually as far as I can tell it ONLY works in opera (which is fine for me because that is what I use). Is there anything in particular that makes it incompatible with firefox?

EDIT:
I forgot to mention... the tabs are appearing just fine in firefox. My problem is that focus is still lost. Is there a different way I'm supposed to use preventDefault in firefox?

Also,

I've never used jquery, how would I go about doing this using jquery?

**wayfarer07** · 05-12-2009, 11:48 AM

Haven't found a solution, but here is my debugging code:

PHP Code:


			
<script language="javascript">
function addListener(){document.getElementById('content').addEventListener('keypress', InsertTab, true);}
function InsertTab(e){
    if (e.keyCode==9){
        e.preventDefault();
        obj = document.getElementById('content');
        var userSelection;
        if (window.getSelection) {
            userSelection = window.getSelection();
        }
        else if (document.selection) {
            userSelection = document.selection.createRange();
        }
        alert(userSelection);
        obj.selection = userSelection;
        obj.selection.text = String.fromCharCode(9);
        e.stopPropagation();
    }
}
addListener();
</script>

For some reason there is no content to the var userSelection

**wayfarer07** · 05-12-2009, 12:01 PM

Here's an article I found an Ajaxian about this: http://ajaxian.com/archives/handling-tabs-in-textareas maybe that will help.

**NullPointer** · 05-12-2009, 12:27 PM

The code in the article works very well in firefox, but is a little buggy in opera. I added a check to execute that script if the browser if firefox and mine otherwise. Still no dice in chrome.

Thanks for the help, now I need to install IE to figure out which to use in that case. Reinstalling IE makes me feel dirty.

**wayfarer07** · 05-12-2009, 12:30 PM

It doesn't work in IE, I just checked. Read the comments... someone claims to have made a version that works.

**NullPointer** · 05-12-2009, 01:59 PM

It doesn't. Or I think it doesn't. The function took the object itself as a parameter. (ie catchTab(obj, e) ). I can't call the function like this so I did this:

Code:

catchTab(e)
{
     var obj = document.getElementById('content');
.
.
.

That should have the same effect correct?

Anyways... I have it working well in firefox and opera, which are the two browsers I care most about. If I could find a function that accomplishes this in IE (even if it only worked in IE) I would be happy.