www.webdeveloper.com
Results 1 to 11 of 11

Thread: Opera problem with, TAB key, and onkeydow, onkeypress and onkeyup events

  1. #1
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

    Opera problem with, TAB key, and onkeydow, onkeypress and onkeyup events

    I'm in the midst of creating a JavaScript code editor and want to override the default behavior of the TAB key. This is working perfectly in Firefox and Safari 3/Win, and only partially in Opera 9.23/Win. Opera does everything but prevent the focus moving away from the TEXTAREA.

    I'm thinking this is an Opera bug or brute-force accessibility check to make sure disabled users can always tab to the next field in a form, yet I think my JavaScript code editor is a perfectly good use of the TAB key, which creates an auto-tab like HTML Kit. Are all the other browsers working properly and Opera is broken? Am I just misunderstanding the W3C event model? Try this code out for yourself:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Testing events on TEXTAREA’s</title>
        <script type="text/javascript">
        <!-- begin hiding
        window.onload = function() {
          var myTextarea = document.getElementById('myTextarea');
          myTextarea.onkeydown = function() {
            return false;
          };
          myTextarea.onkeypress = function() {
            return false;
          };
          myTextarea.onkeyup = function() {
            return false;
          };
        };
        // end hiding -->
        </script>
      </head>
      <body>
        <textarea cols="60" rows="20" id="myTextarea"></textarea>
        <input class="textfield" type="text" size="20">
      </body>
    </html>
    By returning false, no characters should be entered into the TEXTAREA. This works on all browsers save for Opera, which tabs to the next field. Any suggestions? I could create a workaround where the user could hold down the Ctrl key and hit the left or right arrow keys, but I'd prefer to keep my code as browser independent as possible.

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  3. #3
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Have you tried using DOM2 events?

  4. #4
    Join Date
    Feb 2006
    Posts
    2,927
    No key events have made it into the DOM gospel yet.

    Each browser is free to roll his own. Opera is like forefox in most events, but key events are handlind differently. The window always gets the bubbled keypress event, even if you return false from the actual target. Opera has always made heavy use of key events, and is the most rigorous in terms of enforcing accessibility over coder's convenience.

    I would leave the tab key alone. Some people do depend on it. Press the spacebar a few times instead.

  5. #5
    Join Date
    Aug 2007
    Location
    South Africa
    Posts
    51
    I've been trying to manipulate key events with Opera as well. I've noticed that tabIndex is also handled differently.

    I wouldn't agree with leaving the Tab key completely alone, MrHoo, one should be able to build the functionality into an application as desired, and I'm pretty sure that there must be a workaround for acieving Toicontiens implementation.

    Maybe it's worth trying then to handle the even at the window level, and redirect it to your textarea. I'm pretty sure that you can get enough details from the event parameter if you use for example:
    Code:
    window.onkeypress = function(event) {
         // Check the event here, and determine where the keypress originated
         // Then invoke the desired behaviour through a "function pointer"
    };
    Just a guess, I always reason in weird ways.

  6. #6
    Join Date
    Sep 2006
    Location
    Copenhagen, Denmark
    Posts
    1,253
    I'm in the midst of creating a JavaScript code editor and want to override the default behavior of the TAB key.
    Returning false is not the same as canceling the default browser behavior although this is actually achieved most of the time.

    It might be a bug in opera. See this link: http://www.nabble.com/Disabling-the-...-t3711485.html

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    Thanks for the info guys. I'll have to look into this more. I'd like to avoid a blanket keypress event handler as I'm writing this JavaScript class so multiple code editors can be on one page, and I'd only like the overhead of the events to fire when you are on the editor TEXTAREA. Just trying to keep the processing overhead down.

    I have looked into DOM2 events and I'll probably need to go that route then. So far my editor words great in Firefox, and works mostly in Opera, save for the ENTER and TAB keys. I tried Safari 3.03 Beta on Windows only to discover the CONTROL, SHIFT and ALT keys do not fire keypress, keydown or keyup events. I haven't tried the Mac version of the last official release of Safari yet.

    What a lesson in patience and the DOM this project has become.

  8. #8
    Join Date
    Sep 2006
    Location
    Copenhagen, Denmark
    Posts
    1,253
    Here is a workaround for the tab key in Opera
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Testing events on TEXTAREA’s</title>
        <script type="text/javascript">
        <!-- begin hiding
          function handleBlur(e) {
            if (this.lastKey == 9)
              this.focus();
          }
          
          function handleKeyDown(e) {
            this.lastKey = e.keyCode;
          }
          
          function handleFocus(e) {
            this.lastKey = null;
          }
        
          window.onload = function() {
            var elm = document.getElementById('myTextarea');
            elm.onfocus = handleFocus;
            elm.onblur = handleBlur;
            elm.onkeydown = handleKeyDown;
          };
        // end hiding -->
        </script>
      </head>
      <body>
        <textarea cols="60" rows="20" id="myTextarea"></textarea>
        <input class="textfield" type="text" size="20">
      </body>
    </html>
    Last edited by Dok; 09-26-2007 at 01:02 PM.

  9. #9
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  10. #10
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  11. #11
    Join Date
    Sep 2006
    Location
    Copenhagen, Denmark
    Posts
    1,253
    Work around for preventing form submission when hitting enter in an input element of type 'text'. Note that this is not nessesary for a textarea element as a keydown/press/up event of the enter key does not submit the form.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Testing events on TEXTAREA’s</title>
        <script type="text/javascript">
        <!-- begin hiding
          function handleBlur(e) {
            if (this.lastKey == 9)
              this.focus();
          }
          
          function handleKeyDown(e) {
            this.lastKey = e.keyCode;
          }
          
          function handleFocus(e) {
            this.lastKey = null;
          }
          
          function formHandleKeyDown(e) {
            if (e.keyCode == 13)
              this.lastEnter = e.target;
            else
              this.lastEnter = null;
          }
          
          function formHandleSubmit(e) {
            if (this.lastEnter) {
              e.preventDefault();
              this.lastEnter.focus();
              this.lastEnter = null;
              return false;
            }
            else
              return true;
          }
          
          window.onload = function() {
            var textarea = document.getElementById('myTextarea');
            textarea.onfocus = handleFocus;
            textarea.onblur = handleBlur;
            textarea.onkeydown = handleKeyDown;
            var form = document.getElementById('myForm');
            form.addEventListener('keydown',formHandleKeyDown,true);
            form.onsubmit = formHandleSubmit;
          };
        // end hiding -->
        </script>
      </head>
      <body>
        <form id="myForm">
          <textarea cols="60" rows="20" id="myTextarea"></textarea>
          <input class="textfield" type="text" size="20">
          <input type="submit" size="20">
        </form>
      </body>
    </html>

Thread Information

Users Browsing this Thread

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

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