Question

When used in an AIR app, some standard keystrokes in OS X are either ignored or produce ‘mystery’ characters rather than behaving as expected. Examples:

• option + left arrow should move the caret one word backward, it prints a mystery character
• ctrl + h should delete one character backward, it prints h

How do I support OS X default keystrokes (listed here: http://www.hcs.harvard.edu/~jrus/Site/System%20Bindings.html)?

Answer 1

I have found some clues in the Webkit source to enable support in <mx:HTML> views, here: http://www.opensource.apple.com/darwinsource/10.5/WebCore-5523.10.3/editing/Editor.cpp

And a clue with regards to Webkit’s expected syntax here: http://lists.macosforge.org/pipermail/webkit-unassigned/2007-May/038737.html

Note this solution is incomplete, does not work in Flex/Flash components, and depends on Prototype:

$(document).observe('dom:loaded', function() {     // Defined in AIR as !!NativeApplication.supportsDockIcon     if(window.Air.OperatingSystem == 'mac') {         var keyBindings = {             altKey: {                 // Up (should be 38)                 14: {                     dir: -1,                     gran: 'paragraph'                 },                 // Down (should be 40)                 15: {                     dir: 1,                     gran: 'paragraph'                 },                 // Left (should be 37)                 1: {                     dir: -1,                     gran: 'word'                 },                 // Right (should be 39)                 2: {                     dir: 1,                     gran: 'word'                 },                 // Backspace                 8: {                     dir: -1,                     gran: 'word',                     del: true                 },                 // Delete                 46: {                     dir: 1,                     gran: 'word',                     del: true                 }             },             ctrlKey: {                 // Left                 37: {                     dir: -1,                     gran: 'lineBoundary'                 },                 // Right                 39: {                     dir: 1,                     gran: 'lineBoundary'                 },                 // a                 65: {                     dir: -1,                     gran: 'paragraphBoundary'                 },                 // b                 66: {                     dir: -1,                     gran: 'character'                 },                 // d                 68: {                     dir: 1,                     gran: 'character',                     del: true                 },                 // e                 69: {                     dir: 1,                     gran: 'paragraphBoundary'                 },                 // f                 70: {                     dir: 1,                     gran: 'character'                 },                 // h                 72: {                     dir: -1,                     gran: 'character',                     del: true                 },                 // k                 75: {                     dir: 1,                     gran: 'paragraphBoundary',                     del: true                 },                 // n                 78: {                     dir: 1,                     gran: 'line'                 },                 // p                 80: {                     dir: -1,                     gran: 'line'                 }             }         };         $(document).observe('keydown', function(e) {             var target = e.element();             if(                 target.match('input') ||                 target.match('textarea') ||                 target.readAttribute('contenteditable') == 'true'             ) {                 if(                     (e.keyCode in keyBindings.altKey && e.altKey) ||                     (e.keyCode in keyBindings.ctrlKey && e.ctrlKey)                 ) {                     e.stop();                     var selection = window.getSelection();                     var keystroke = keyBindings[(e.altKey ? 'altKey' : 'ctrlKey')][e.keyCode];                     if(                         (e.keyCode != 8 && e.keyCode != 46) ||                         selection.isCollapsed                     ) {                         selection.modify(                             keystroke.del || e.shiftKey ?                                 'extend' :                                 'move',                             keystroke.dir == -1 ? 'backward' : keystroke.dir == 1 ? 'forward' : null,                             keystroke.gran                         );                     }                     if(keystroke.del && !selection.isCollapsed) {                         document.execCommand('delete', false, null);                     }                 }             }         });     } });