Ich möchte F1-F12-Schlüssel mit JavaScript und jQuery verarbeiten.
Ich bin mir nicht sicher, welche Fallstricke zu vermeiden sind, und ich kann derzeit keine Implementierungen in anderen Browsern als Internet Explorer 8, Google Chrome und Mozilla FireFox 3 testen.
Irgendwelche Vorschläge für eine vollständige Cross-Browser-Lösung? So etwas wie eine gut getestete jQuery-Bibliothek oder einfach nur Vanille-jQuery / JavaScript?
Antworten:
Die beste Quelle für diese Art von Frage ist diese Seite: http://www.quirksmode.org/js/keys.html
Was sie sagen ist, dass die Schlüsselcodes auf Safari ungerade und überall konsistent sind (außer dass es im IE kein Tastendruckereignis gibt, aber ich glaube, dass Keydown funktioniert).
Ich stimme William zu, dass es im Allgemeinen eine schlechte Idee ist, die Funktionstasten zu entführen. Trotzdem habe ich die Verknüpfungsbibliothek , die diese Funktionalität hinzufügt, sowie andere Tastaturkürzel und -kombinationen auf sehr raffinierte Weise gefunden.
Einzelner Tastendruck:
shortcut.add("F1", function() {
alert("F1 pressed");
});
Kombination von Tastenanschlägen:
shortcut.add("Ctrl+Shift+A", function() {
alert("Ctrl Shift A pressed");
});
Ich bin nicht sicher, ob das Abfangen von Funktionstasten möglich ist, aber ich würde es vermeiden, alle Funktionstasten zusammen zu verwenden. Funktionstasten werden von Browsern verwendet, um eine Vielzahl von Aufgaben auszuführen, von denen einige häufig vorkommen. In Firefox unter Linux sind beispielsweise mindestens sechs oder sieben der Funktionstasten für die Verwendung durch den Browser reserviert:
Das Schlimmste ist, dass verschiedene Browser unter verschiedenen Betriebssystemen unterschiedliche Schlüssel für unterschiedliche Zwecke verwenden. Das sind viele Unterschiede, die berücksichtigt werden müssen. Sie sollten sich an sicherere, weniger häufig verwendete Tastenkombinationen halten.
Wow es ist sehr einfach. Ich bin schuld daran, dies zu schreiben, warum schafft es noch niemand?
$(function(){
//Yes! use keydown 'cus some keys is fired only in this trigger,
//such arrows keys
$("body").keydown(function(e){
//well you need keep on mind that your browser use some keys
//to call some function, so we'll prevent this
e.preventDefault();
//now we caught the key code, yabadabadoo!!
var keyCode = e.keyCode || e.which;
//your keyCode contains the key code, F1 to F12
//is among 112 and 123. Just it.
console.log(keyCode);
});
});
Ohne andere externe Klasse können Sie Ihren persönlichen Hack-Code einfach mit erstellen
event.keyCode
Eine weitere Hilfe für alle, denke ich, ist diese Testseite zum Abfangen des Schlüsselcodes (einfach kopieren und in die neue Datei.html einfügen, um Ihr Ereignis zu testen).
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td,th{border:2px solid #aaa;}
</style>
<script type="text/javascript">
var t_cel,tc_ln;
if(document.addEventListener){ //code for Moz
document.addEventListener("keydown",keyCapt,false);
document.addEventListener("keyup",keyCapt,false);
document.addEventListener("keypress",keyCapt,false);
}else{
document.attachEvent("onkeydown",keyCapt); //code for IE
document.attachEvent("onkeyup",keyCapt);
document.attachEvent("onkeypress",keyCapt);
}
function keyCapt(e){
if(typeof window.event!="undefined"){
e=window.event;//code for IE
}
if(e.type=="keydown"){
t_cel[0].innerHTML=e.keyCode;
t_cel[3].innerHTML=e.charCode;
}else if(e.type=="keyup"){
t_cel[1].innerHTML=e.keyCode;
t_cel[4].innerHTML=e.charCode;
}else if(e.type=="keypress"){
t_cel[2].innerHTML=e.keyCode;
t_cel[5].innerHTML=e.charCode;
}
}
window.onload=function(){
t_cel=document.getElementById("tblOne").getElementsByTagName("td");
tc_ln=t_cel.length;
}
</script>
</head>
<body>
<table id="tblOne">
<tr>
<th style="border:none;"></th><th>onkeydown</th><th>onkeyup</th><th>onkeypress</td>
</tr>
<tr>
<th>keyCode</th><td> </td><td> </td><td> </td>
</tr>
<tr>
<th>charCode</th><td> </td><td> </td><td> </td>
</tr>
</table>
<button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML=' '};">CLEAR</button>
</body>
</html>
Hier ist eine funktionierende Demo, die Sie hier ausprobieren können:
Lösung in ES6 für moderne Browser und IE11 (mit Transpilation auf ES5):
//Disable default IE help popup
window.onhelp = function() {
return false;
};
window.onkeydown = evt => {
switch (evt.keyCode) {
//ESC
case 27:
this.onEsc();
break;
//F1
case 112:
this.onF1();
break;
//Fallback to default browser behaviour
default:
return true;
}
//Returning false overrides default browser event
return false;
};
this.onXEreignisse beheben , damit das Beispiel portabler ist?
Eines der Probleme beim Abfangen der Tasten F1-F12 besteht darin, dass die Standardfunktion ebenfalls überschrieben werden muss . Hier ist ein Beispiel für eine Implementierung der F1-Taste "Hilfe" mit der Überschreibung, die das Popup der Standardhilfe verhindert. Diese Lösung kann für die Tasten F2-F12 erweitert werden . In diesem Beispiel werden absichtlich keine Kombinationsschlüssel erfasst , dies kann jedoch auch geändert werden.
<html>
<head>
<!-- Note: reference your JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h1>F-key trap example</h1>
<div><h2>Example: Press the 'F1' key to open help</h2></div>
<script type="text/javascript">
//uncomment to prevent on startup
//removeDefaultFunction();
/** Prevents the default function such as the help pop-up **/
function removeDefaultFunction()
{
window.onhelp = function () { return false; }
}
/** use keydown event and trap only the F-key,
but not combinations with SHIFT/CTRL/ALT **/
$(window).bind('keydown', function(e) {
//This is the F1 key code, but NOT with SHIFT/CTRL/ALT
var keyCode = e.keyCode || e.which;
if((keyCode == 112 || e.key == 'F1') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Open help window here instead of alert
alert('F1 Help key opened, ' + keyCode);
}
// Add other F-keys here:
else if((keyCode == 113 || e.key == 'F2') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Do something else for F2
alert('F2 key opened, ' + keyCode);
}
});
</script>
</body>
</html>
Ich habe mir bei der Entwicklung eine ähnliche Lösung aus einem verwandten SO-Artikel ausgeliehen. Lassen Sie mich wissen, ob dies auch für Sie funktioniert hat.
Probieren Sie diese Lösung aus, wenn sie funktioniert.
window.onkeypress = function(e) {
if ((e.which || e.keyCode) == 116) {
alert("fresh");
}
}
Wenn Sie angle.js zum Behandeln von Ereignissen verwenden, sollten Sie dies ng-keydownzum Verhindern pause in developervon Chrome verwenden.
Fügen Sie eine Verknüpfung hinzu:
$.Shortcuts.add({
type: 'down',
mask: 'Ctrl+A',
handler: function() {
debug('Ctrl+A');
}
});
Reagieren Sie auf Verknüpfungen:
$.Shortcuts.start();
Fügen Sie eine Verknüpfung zu einer anderen Liste hinzu:
$.Shortcuts.add({
type: 'hold',
mask: 'Shift+Up',
handler: function() {
debug('Shift+Up');
},
list: 'another'
});
Aktivieren Sie "eine andere" Liste:
$.Shortcuts.start('another');
Remove a shortcut:
$.Shortcuts.remove({
type: 'hold',
mask: 'Shift+Up',
list: 'another'
});
Stop (Ereignishandler aufheben):
$.Shortcuts.stop();
Meine Lösung für dieses Problem lautet:
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
Mit der magischen Zahl, 123die der Schlüssel F12 ist.
Sie können dies mit jquery wie folgt tun:
$("#elemenId").keydown(function (e) {
if(e.key == "F12"){
console.log(e.key);
}
});