HTML-Taste wie Taste von der Tastatur gedrückt, und Funktion auf bestimmte Objekt oder ganze Website

Question

Die Schaltfläche sollte wie folgt handeln: Geben, Pfeiltasten, Leerzeichen ... Bereits einige Beispiele versucht. Hier ist eine:

var e = $.Event("keydown", { keyCode: 8}); 
$("#target").keypress(); 

Answer 1

Zunächst einmal, das keypress Ereignis nicht für Nicht-Drucktasten ausgelöst wird, so dass die Pfeiltasten nicht mit .keypress() arbeiten.

Vom jQuery documentation:

Das keypress Ereignis zu einem Element gesendet wird, wenn der Browser die Tastatureingabe registriert. Dies ähnelt dem keydown-Ereignis, außer dass Modifizierer und nicht druckbare Schlüssel wie Shift, Esc und Delete keydown Ereignisse, aber keine keypress Ereignisse auslösen. Je nach Plattform und Browser können weitere Unterschiede zwischen den beiden Ereignissen auftreten.

Stattdessen möchten Sie .keydown() oder .keyup() verwenden. Aber anstatt zu versuchen, ein keydown oder keyup Ereignis auszulösen, wenn Ihre Taste geklickt wird, warum schreiben Sie nicht einfach eine Funktion, die tut, was Sie wollen, und rufen Sie diese Funktion auf, wenn die Taste gedrückt wird oder Ihre Taste geklickt wird?

Zum Beispiel, sagen Sie ein Zeichen wollen nach links zu bewegen, wenn Sie die linke Taste oder der linken Taste Taste drücken, können Sie diese Funktion schreiben konnte:

var moveLeft = function() { 
    alert('Moving character left one position'); 
}; 

Dann können Sie diese Funktion aufrufen, wenn die linke Die Taste wird gedrückt oder die linke Taste wird angeklickt.

$('#left-btn').click(moveLeft); 

$('body').keydown(function(e) { 
    if (e.keyCode == 37) { 
     moveLeft(); 
    } 
}); 

Arbeitsbeispiel:

Browser Überprüfen Sie JavaScript-Konsole, wenn die linke oder rechte Taste klicken oder die linke oder rechte Pfeiltaste drücken.

$(document).ready(function() { 
 
    var moveLeft = function() { 
 
    console.log('Moving left!'); 
 
    }; 
 

 
    var moveRight = function() { 
 
    console.log('Moving right!'); 
 
    }; 
 

 
    $('body').keydown(function(e) { 
 
    switch (e.keyCode) { 
 
     case 37: 
 
     moveLeft(); 
 
     break; 
 
     case 39: 
 
     moveRight(); 
 
     break; 
 
    } 
 
    }); 
 
    
 
    $('#left-btn').click(moveLeft); 
 
    
 
    $('#right-btn').click(moveRight); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button id="left-btn">&larr;</button> 
 
    <button id="right-btn">&rarr;</button> 
 
</div>