[solved] Tastenevents mit Javascript behandlen (HTML, CSS und Javascript)

[thread]14985[/thread]

[solved] Tastenevents mit Javascript behandlen

Leser: 23

Articles: hide open all | hide show old branches

+17 replies
moritz

2010-05-02 11:35
User since
2007-05-11
923 Artikel
HausmeisterIn
Hallo,

ich probiere gerade, eine Präsentation mit HTML + CSS + js zu bauen, und möchte auf Tastendruck z.B. auf die nächste Seite gehen.

Das funktioniert mit Opera auch gut, mit anderen Browsern aber nicht - die Events werden einfach nicht aufgerufen.

Hier ist ein Beispiel (sollte mit 'n' auf die nächste Seite springen, mit 'p' auf die vorherige). Der Code benutzt jQuery, und der interessante Teil sieh so aus:
Code: (dl )

1 2 3 4 5 6 7 8

<script type="text/javascript"> $(document).ready(function() { $('body').keyup(function(e) { var code = e.keyCode || e.which; // Mache was }); }); </script>
Ich habe auch schon andere Events als keyup probiert, aber Firefox und Konqueror weigern sich hartnäckig, auf irgend einen dieser Events zu reagieren. Was mache ich falsch?

Vielen Dank im Voraus,
Moritz
Perl 6 - Perls Zukunft
- +4 replies
- bianca
  
  2010-05-02 13:05
  User since
  2009-09-13
  7016 Artikel
  BenutzerIn
  Sollte mit einer kleine "Weiche" klappen:
  
  Code: (dl )
  
  1 2 3 4 5
  
  var keycode; if (window.event) keycode = window.event.keyCode; else if (e) keycode = e.which; else return; if (keycode == 13) absenden();
  
  Edit: Sollte mit allen Browsern klappen aber ich habe keine Ahnung, wie das in jQuery reinpasst, ich arbeite damit nicht.
  
  Edit2: keyup verwende ich übrigens auch.
  Müsste dann für jQuery so aussehen:
  
  Code: (dl )
  
  1 2 3 4 5 6 7 8 9 10 11 12 13
  
  <script type="text/javascript"> $(document).ready(function() { $('body').keyup(function(e) { var keycode; if (window.event) keycode = window.event.keyCode; else if (e) keycode = e.which; else return; // nicht auswertbar if (keycode == 13) { // Mache was aufgrund Return/Enter } }); }); </script>
  
  Last edited: 2010-05-02 13:14:29 +0200 (CEST)
  10 print "Hallo"
  20 goto 10
  - +3 replies
  - moritz
    
    2010-05-02 13:25
    
    User since
    2007-05-11
    923 Artikel
    HausmeisterIn
    
    Das Problem ist nicht die Innerei des Events, sondern dass die Funktion, die ich mit dem Event assoziieren will, nicht aufgerufen wird.
    Last edited: 2010-05-02 13:28:26 +0200 (CEST)
    Perl 6 - Perls Zukunft
    - +2 replies
    - bianca
      
      2010-05-02 13:31
      
      User since
      2009-09-13
      7016 Artikel
      BenutzerIn
      
      Ja, vielleicht deshalb, weil der Event nicht korrekt erkannt wird.
      Hast meine Vorschlag mal getestet oder ein alert zur Anzeige der Variable code eingebaut, ob der Event ausgelöst wird?
      10 print "Hallo"
      20 goto 10
      - moritz
        
        2010-05-02 14:33
        
        User since
        2007-05-11
        923 Artikel
        HausmeisterIn
        
        Ja, ich habe es mit alert() getestet. Nein, die Funktion wird nicht aufgerufen. Nein, wenn ich die Innereien der Funktion ändere macht das nichts aus.
        Perl 6 - Perls Zukunft
- +3 replies
- pq
  
  2010-05-02 14:35
  
  User since
  2003-08-04
  12208 Artikel
  Admin1
  
  so ganz nebenbei: in opera kannst du auch ohne javascript zur nächsten seite springen, mit shift+x (und rückwärts mit shift+z). entweder erkennt opera die navigationslinks alleine oder durch hilfe der meta-tags <link rel="next" ...> und "prev". siehe http://de.selfhtml.org/html/kopfdaten/beziehungen....
  
  keine ahnung, ob FF mittlerweile auch sowas hat, hatte ich jedenfalls dort immer vermisst.
  
  edit: link hinzugefügt
  Last edited: 2010-05-02 14:36:24 +0200 (CEST)
  Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. -- Damian Conway in "Perl Best Practices"
  lesen: Wie frage ich & perlintro brian's Leitfaden für jedes Perl-Problem
  - +2 replies
  - moritz
    
    2010-05-02 15:11
    
    User since
    2007-05-11
    923 Artikel
    HausmeisterIn
    
    ... und es gibt access keys, ja. Aber ich will eben mit einem einzelnen Tastendruck weiter, da möchte ich kein Strg+irgendwas oder Shit+Esc+Accesskey.
    
    Irgendwie kann ich mir nicht vorstellen, dass das so schwer sein kann, auf Tastendrücke in Javascript zu reagieren - ich bin immer noch überzeugt, dass ich etwas einfaches falsch mache.
    Perl 6 - Perls Zukunft
    - pq
      
      2010-05-02 15:14
      
      User since
      2003-08-04
      12208 Artikel
      Admin1
      
      du kannst die keys in opera auch editieren und statt shift+x was anderes dafür nehmen.
      Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. -- Damian Conway in "Perl Best Practices"
      lesen: Wie frage ich & perlintro brian's Leitfaden für jedes Perl-Problem
- bianca
  
  2010-05-02 15:27
  
  User since
  2009-09-13
  7016 Artikel
  BenutzerIn
  
  Hab Dein Beispiel gerade eben mal aufgerufen und kann Dich für IE8 beruhigen: KLAPPT!
  10 print "Hallo"
  20 goto 10
- bianca
  
  2010-05-02 15:34
  
  User since
  2009-09-13
  7016 Artikel
  BenutzerIn
  
  2010-05-02T09:35:48 moritz
  Ich habe auch schon andere Events als keyup probiert, aber Firefox und Konqueror weigern sich hartnäckig, auf irgend einen dieser Events zu reagieren. Was mache ich falsch?
  
  Hast Du es mal ganz ohne jQuery probiert und den onkeyup mal manuell in den body tag gesetzt?
  Ergänzung: Wollte damit sagen, dass ich den onkeyup in input Feldern häufiger verwende und in keinem Browser bisher ein Problem damit hatte. Hab an den Stellen allerdings auch keine JS Lib im Einsatz. Deren Einfluss auf die Funktionalität kann ich nicht abschätzen.
  Last edited: 2010-05-02 15:36:37 +0200 (CEST)
  10 print "Hallo"
  20 goto 10
- +4 replies
- bianca
  
  2010-05-02 15:39
  
  User since
  2009-09-13
  7016 Artikel
  BenutzerIn
  
  Fällt mir eben noch etwas auf. Willste nicht mal einen Doctype angeben?
  z.B.
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  
  Der FF ist da extrem unangenehm genau und führt ansonsten viele JS Sachen garnicht aus.
  
  Edit: Und wenn Du ausschließlich die jQuery verwendest, sollte sogar ein ergänzendes
  "http://www.w3.org/TR/html4/loose.dtd"
  Sinn machen. Damit nur Vorsicht bei gewissen Funktionen in JS!
  Last edited: 2010-05-02 15:42:06 +0200 (CEST)
  10 print "Hallo"
  20 goto 10
  - +3 replies
  - moritz
    
    2010-05-02 16:25
    
    User since
    2007-05-11
    923 Artikel
    HausmeisterIn
    
    Danke für den Versuch, aber auch mit doctype gehts nicht.
    Perl 6 - Perls Zukunft
    - +2 replies
    - sitescriptor
      
      2010-05-02 23:54
      
      User since
      2009-08-09
      105 Artikel
      BenutzerIn
      
      Versuch doch mal den Event auf "document" Ebene abzufangen.
      Ich hab das für eine Anwendung auf prototypejs-Basis so gemacht:
      
      Code: (dl )
      
      1 2 3
      
      //-------- initialize handler document.observe( 'mousemove', this.mousecontrol ); document.observe( 'click', this.mousecontrol );
      
      OK, nur click! Aber vielleicht liegt das Problem auch im BODY...
      - moritz
        
        2010-05-03 08:41
        
        User since
        2007-05-11
        923 Artikel
        HausmeisterIn
        
        Tatsache, mit document gehts. Ich hätte schwören können, das am Anfang ausprobiert zu haben.
        
        Vielen Dank!
        Perl 6 - Perls Zukunft
- +2 replies
- GwenDragon
  
  2010-05-03 09:59
  User since
  2005-01-17
  14787 Artikel
  Admin1
  geht auch so mit Firefox 3.6:
  
  Code (html): (dl )
  
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=us-ascii" /> <script src="jquery-1.3.2.min.js" type="text/javascript"> </script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $('html').keyup(function(e) { var code = e.keyCode || e.which; alert(code); }); }); //]]> </script> <title></title> </head> <body> <p>Das ist ein Text.</p> </body> </html>
  
  Wenn body nicht will, dann eben den Event an das Element html binden.
  
  //EDIT: s/keydown/keyup/ in code
  Last edited: 2010-05-03 10:02:33 +0200 (CEST)
  die Drachin Gwen
  
  Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
  - Gast wurscht
    
    2010-05-11 23:52
    
    jquery normalisiert das Eventobjekt.
    keyCode ist nicht nötig: http://api.jquery.com/category/events/event-object...
    Last edited: 2010-05-11 23:53:49 +0200 (CEST)
- esskar
  
  2010-05-03 10:07
  
  User since
  2003-08-04
  7321 Artikel
  ModeratorIn
  
  HTML5, zum abschauen: http://apirocks.com/html5/html5.html#slide1

View all threads created 2010-05-02 11:35.