www.webdeveloper.com
Results 1 to 5 of 5

Thread: Compatibility Issues: Firefox and Chrome

  1. #1
    Join Date
    May 2009
    Posts
    3

    Compatibility Issues: Firefox and Chrome

    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.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    May 2009
    Posts
    3
    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?

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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;
        }
        }
    }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    May 2009
    Posts
    3
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles