Letzte Woche habe ich eine komplette Win32 Windows Forms Anwendung auf HTML5 + JavaScript umgeschrieben. Es handelt sich hierbei um eine Demo einer Kassensoftware. Nichts besonderes im Umfang, aber mit ein paar Details die Christian und mir viel Freude bereitet haben. Die Migration der Kasse hat einige Fragen aufgeworfen, z.B. den Aufbau von reinen HTML Anwendungen, die Gliederung der Quelldateien und die Frameworks die man hinzuziehen mag oder doch lieber selbst schreibt.

Ein Framework das ich konsequent eingesetzt habe ist jQuery. jQuery abstrahiert Browser Spezifikas und verspricht eine durchgängige Framework-Experience. Im Prinzip ist das auch so, wenn man mal von Keycodes der Browser absieht.

In der Kasse werden die Eingaben vor dem Übermitteln an das Input Control-Feld gefiltert, hier muss ich die Keycodes abgreifen. Die Keycodes der Tasten werden aber nun abhängig vom Browser mit anderen Werten übermittelt. Im konkreten Fall der Kassenanwendung geht es um das Asterisk Zeichen auf dem Haupt-Tastenfeld. Internet Explorer 9 und Google Chrome geben hierfür den KeyCode 187 aus, während Firefox 107 übermittelt. Bei Opera ist es noch konfuser, neben dem Asterisk werden hier noch mehr Keycodes komplett anders wiedergegeben. Der Keycode für das Asterisk wäre bei Opera die 61.

So habe ich eine Test-Seite erstellt um das zu veranschaulichen. Hier die Screenshots, zuerst, der IE9, dann Firefox 4 und zuletzt Google Chrome.

ie9-keycodes

firefox4-keycodes

chrome-keycodes

Und dies ist die HTML Test-Seite:

   1: <!DOCTYPE html>
   2:  
   3: <html lang="en">
   4:   <head>
   5:       <meta charset="utf-8" />
   6:       <title></title>
   7:       <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"></script>
   1:  
   2:         
   3:       <script>
   4:           $(function() {
   5:               $("#keyInput").keydown( function(key) {
   6:                   $("<li>").html("Keycode: " + key.keyCode + 
   7:                     " Which: " + key.which + " Shift: " + 
   8:                     key.shiftKey + " Meta: " + 
   9:                     key.metaKey ).prependTo($("#keycodes"));
  10:               });
  11:           });
  12:             
  13:       
</script>
   8:   </head>
   9:   <body>
  10:       <input type="text" id="keyInput"/>
  11:       <div style="overflow: scroll; width: 400px; height: 400px;">
  12:           <ul id="keycodes"></ul>
  13:       </div>
  14:   </body>
  15: </html>

Auf der Plugin Seite von jQuery gibt es sogar ein Plugin das Abhilfe schaffen soll, ich habe es allerdings nicht verwendet und auch nicht getestet, vielleicht ist es ja brauchbar (Unified Keycode 1.0). Feedback welcome.

DotNetKicks-DE Image