Tôi muốn xử lý các khóa F1-F12 bằng JavaScript và jQuery.
Tôi không chắc phải tránh những cạm bẫy nào và hiện tôi không thể kiểm tra việc triển khai trong bất kỳ trình duyệt nào khác ngoài Internet Explorer 8, Google Chrome và Mozilla FireFox 3.
Bất kỳ đề xuất nào cho một giải pháp trình duyệt chéo đầy đủ? Một cái gì đó giống như một thư viện jQuery đã được thử nghiệm tốt hoặc có thể chỉ là jQuery / JavaScript vani?
Câu trả lời:
Nguồn tốt nhất mà tôi có cho loại câu hỏi này là trang này: http://www.quirksmode.org/js/keys.html
Những gì họ nói là các mã khóa kỳ lạ trên Safari và nhất quán ở mọi nơi khác (ngoại trừ việc không có sự kiện nhấn phím trên IE, nhưng tôi tin rằng việc nhấn phím hoạt động).
Tôi đồng ý với William rằng nói chung, đó là một ý tưởng tồi nếu chiếm đoạt các phím chức năng. Điều đó nói rằng, tôi đã tìm thấy thư viện phím tắt bổ sung chức năng này, cũng như các phím tắt và tổ hợp bàn phím khác, một cách rất mượt mà.
Một lần nhấn phím:
shortcut.add("F1", function() {
alert("F1 pressed");
});
Sự kết hợp của các tổ hợp phím:
shortcut.add("Ctrl+Shift+A", function() {
alert("Ctrl Shift A pressed");
});
Tôi không chắc liệu có thể chặn các phím chức năng hay không, nhưng tôi sẽ tránh sử dụng tất cả các phím chức năng cùng nhau. Các phím chức năng được sử dụng bởi các trình duyệt để thực hiện nhiều tác vụ khác nhau, một số trong số chúng khá phổ biến. Ví dụ: trong Firefox trên Linux, ít nhất sáu hoặc bảy phím chức năng được dành riêng cho trình duyệt sử dụng:
Phần tệ nhất là các trình duyệt khác nhau trên các hệ điều hành khác nhau sử dụng các khóa khác nhau cho những thứ khác nhau. Đó là rất nhiều khác biệt để giải thích. Bạn nên sử dụng các tổ hợp phím an toàn hơn, ít được sử dụng hơn.
Wow nó rất đơn giản. Tôi đáng trách khi viết cái này, tại sao không có ai làm cho nó trước đây?
$(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);
});
});
Nếu không có lớp bên ngoài khác, bạn có thể tạo mã hack cá nhân của mình chỉ bằng cách sử dụng
event.keyCode
Một trợ giúp khác cho tất cả, tôi nghĩ là trang kiểm tra này để đánh chặn Mã khóa (chỉ cần sao chép và chuyển sang file.html mới để kiểm tra sự kiện của bạn).
<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>
Đây là bản demo đang hoạt động để bạn có thể thử ngay tại đây:
Giải pháp trong ES6 cho các trình duyệt hiện đại và IE11 (với sự chuyển đổi sang 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.onXsự kiện để ví dụ là di động hơn?
Một trong những vấn đề khi bẫy các phím F1-F12 là chức năng mặc định cũng phải được ghi đè . Dưới đây là một ví dụ về việc triển khai phím F1 'Trợ giúp' , với chức năng ghi đè ngăn chặn cửa sổ bật lên trợ giúp mặc định. Giải pháp này có thể được mở rộng cho các phím F2-F12 . Ngoài ra, ví dụ này cố tình không nắm bắt các phím kết hợp , nhưng điều này cũng có thể được thay đổi.
<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>
Tôi đã mượn một giải pháp tương tự từ một bài báo SO liên quan trong việc phát triển điều này. Hãy cho tôi biết nếu điều này cũng hiệu quả với bạn.
Hãy thử giải pháp này nếu hiệu quả.
window.onkeypress = function(e) {
if ((e.which || e.keyCode) == 116) {
alert("fresh");
}
}
Khi bạn sử dụng angle.js để xử lý các sự kiện, bạn nên sử dụng ng-keydownđể ngăn chặn pause in developertrong chrome.
Thêm lối tắt:
$.Shortcuts.add({
type: 'down',
mask: 'Ctrl+A',
handler: function() {
debug('Ctrl+A');
}
});
Bắt đầu phản ứng với các phím tắt:
$.Shortcuts.start();
Thêm lối tắt vào danh sách “khác”:
$.Shortcuts.add({
type: 'hold',
mask: 'Shift+Up',
handler: function() {
debug('Shift+Up');
},
list: 'another'
});
Kích hoạt danh sách “khác”:
$.Shortcuts.start('another');
Remove a shortcut:
$.Shortcuts.remove({
type: 'hold',
mask: 'Shift+Up',
list: 'another'
});
Dừng (hủy liên kết trình xử lý sự kiện):
$.Shortcuts.stop();
Hướng dẫn:
http://www.stepanreznikov.com/js-shortcuts/
Giải pháp của tôi cho vấn đề này là:
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
Với con số kỳ diệu 123là phím F12.
Bạn có thể làm điều này với jquery như sau:
$("#elemenId").keydown(function (e) {
if(e.key == "F12"){
console.log(e.key);
}
});