Bug 10614 – DIV element does not support 'keypress' event attribute, contrary to w3c specification.

• Component: JavaScriptCore
• Status: VERIFIED REMIND

[Christopher M. Balz]

Test case attached.
After, for example, clicking on a div element (with or without scrollbars) in an html page, the user presses a key, no keypress event is heard. 

The div element should emit the keypress event in this case, as it in fact does on Internet Explorer.  Note that on Firefox (1.5), div elements that have scrollbars showing do emit keypress events.  But all clickable and/or tabbable div elements should do so.  See the w3c spec links below.  

Practical uses of this are custom JavaScript modal dialogs, as found at vox.com, where the only way to hear keyboard events after the user clicks on a non-scrollable div is to reset the current form-input-field focus to a form input element.  Doing so disturbs the user's tab traversal of the dialog, impeding usability and accessibility.  But not hearing the event means that the user cannot close the dialog in the standard user-interface fashion by pressing the 'esc' key.  

In the w3c HTML 4.01 Specification, at
http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.4, it is specified that the 'div' element have as a member of its set of attributes the set of entity events (%events), at
http://www.w3.org/TR/REC-html40/sgml/dtd.html#events.  This set includes 'keypress'.


Reproducible: Always

Steps to Reproduce:
 1. Open Test Case 
 2. Click on yellow-bordered box.
 3. Press a key.

Actual Results:  
 No keypress event is logged in the bottom box.

Expected Results:  
 A keypress event should be logged in the bottom box.

[Christopher M. Balz]

Created attachment 10290 [details]
Test case for this bug.

[Alexey Proskuryakov]

See also: bug 12999.

[Erik Arvidsson]

The element must be focusable to fire key events. If you set the tabIndex the element can receive focus and will fire key events.

[Christopher M. Balz]

I marked this 'remind' because there is nothing in the w3c spec that indicates that 'tabIndex' must be set in order for a 'div' element to support 'onkeypress', and because several major browsers implement the functionality correctly (detail below).  

The w3c spec states clearly ( in the w3c HTML 4.01 Specification, at http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.4 ), that a 'div' should support 'keypress', and lists no restriction on that, about 'tabIndex' or any other.

The behavior of other browsers may be checked with the test case here ( https://bug-10614-attachments.webkit.org/attachment.cgi?id=10290 ) - Internet Explorer 6, Konqueror 4.2.4 (with WebKit Part), and Opera 8.27 report keypress events properly for the divs, as well as likely later versions.  Firefox 3.0.4 does not.  However, it passes an additional test case, directly below. 

Here is an additional test case, which all browsers but Safari/Chrome/WebKit pass: At https://www.etrade.com/javascript/et1/dev_tools/test/harness/modal_dialog/index.html , once a modal dialog is shown by clicking on the button, the 'esc' key should dismiss the dialog. 

I have seen this bug cropping up in bugs filed by Meebo and other services.

[Darin Adler]

Moving all JavaScriptGlue bugs to JavaScriptCore. The JavaScriptGlue framework itself is long gone. And most of the more recent bugs put in this component were put there by people who thought this was for some other aspect of “JavaScript glue” and have nothing to do with the actual original reason for the existence of this component, which was an OS-X-only framework named JavaScriptGlue.