Compatibility Issues: Firefox and Chrome

**NullPointer** · 05-12-2009 01:31 AM

I wrote a script that prevents the tab key from moving focus to the next field in a form and instead inserts a tab character (similar to a desktop text editor). It works perfect in Opera, partially in firefox, and not at all in chrome. Here is the code:

Code:

<script type="text/javascript">
function InsertTab(e)
{
	var evtobj=window.event? event : e;
	var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode;
	if (unicode==9)
	{
		var obj = document.getElementById('content');
		if(document.selection)
		{
			obj.selection = document.selection.createRange();
			obj.selection.text = String.fromCharCode(9);
		}
		else
		{
			var before, after;
			before = obj.value.substring(0, obj.selectionStart);
			after = obj.value.substring(obj.selectionEnd, obj.value.length);
 
			obj.value= String.concat(before, String.fromCharCode(9), after);
		}
		
		if(evtobj.stopPropagation) {
			evtobj.stopPropagation(); }
		else {
			evtobj.cancelBubble = true; }

		if(evtobj.preventDefault) {
			evtobj.preventDefault(); }
		else {
			evtobj.returnValue = false; }
	}
	return false;
}
function tablistener(){document.getElementById('content').addEventListener('keypress', InsertTab, true);}
window.onload=tablistener;
</script>

As I mentioned earlier, this works as expected in Opera. In firefox the tab character is inserted, but focus is still moved to the next field. In chrome no tab character is inserted and focus is still moved to the next field.

Any help is appreciated.

**Fang** · 05-12-2009 05:21 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function catchTab(e) {
var e=(window.event)? event : e;
if (e.keyCode==9) { // Tab
    if (window.event) {
    	window.event.returnValue=false;
        }
    else {
    	if (e.cancelable ) {e.preventDefault();}
    	}
	document.getElementById('content').value+=String.fromCharCode(9);
    }
}
window.onload=function() {document.getElementById('content').onkeydown=catchTab;};
</script>

</head>
<body>
<form action="#" name="form1">
<div>
    <textarea rows="10" cols="20" name="content" id="content"></textarea>
    <input type="text">
    <button type="submit">submit</button>
</div>
</form>
</body>
</html>

**NullPointer** · 05-12-2009 10:14 AM

Thanks for the reply.

That version actually doesn't work at all. Also, wouldn't

document.getElementById('content').value+=String.fromCharCode(9);

add a tab to the end of the text? I need the tab to be added at the current cursor position.

Does anyone notice anything about my code that is making it incompatible with firefox?

**Fang** · 05-12-2009 10:45 AM

Code:

function catchTab(e) {
var e=(window.event)? event : e;
if (e.keyCode==9) { // Tab
    if (window.event) {
    	window.event.returnValue=false;
        }
    else {
    	if (e.cancelable ) {e.preventDefault();}
    	}
    var obj=document.getElementById('content');;
    if(document.selection)
    {
    obj.selection = document.selection.createRange();
    obj.selection.text = String.fromCharCode(9);
    }
    else
    {
    var before, after;
    before = obj.value.substring(0, obj.selectionStart);
    after = obj.value.substring(obj.selectionEnd, obj.value.length);
    obj.value= before+String.fromCharCode(9)+after;
    }
    }
}

**NullPointer** · 05-12-2009 11:07 AM

Using the code you posted, tabs are being inserted, but focus is stilled moved to the next field. I think the problem has something to do with preventDefault() not working. e.cancelable is returning true in FF, so I know its being called, it just doesn't seem to prevent the default action from occuring.

Again, thanks for the help.

Thread: Compatibility Issues: Firefox and Chrome

Thread Tools

Display

Compatibility Issues: Firefox and Chrome

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions