Chụp tổ hợp phím ctrl + z trong javascript


85

Tôi đang cố gắng nắm bắt ctrl+ ztổ hợp phím trong javascript với mã này:

<html>
<head>
    <title>Untitled Document</title>
</head>
<body>

    <script type='text/javascript'>
        function KeyPress(e) {
            var evtobj = window.event? event : e


            //test1 if (evtobj.ctrlKey) alert("Ctrl");
            //test2 if (evtobj.keyCode == 122) alert("z");
            //test 1 & 2
            if (evtobj.keyCode == 122 && evtobj.ctrlKey) alert("Ctrl+z");
        }

        document.onkeypress = KeyPress;
    </script>

</body>
</html>

Dòng chú thích "test1" tạo ra cảnh báo nếu tôi giữ ctrlphím và nhấn bất kỳ phím nào khác.

Dòng chú thích "test2" tạo ra cảnh báo nếu tôi nhấn zphím.

Đặt chúng lại với nhau theo dòng sau "kiểm tra 1 & 2", và giữ ctrlphím sau đó nhấn zphím không tạo ra cảnh báo như mong đợi.

Có gì sai với mã?

Câu trả lời:


95
  1. Sử dụng onkeydown(hoặc onkeyup), khôngonkeypress
  2. Sử dụng keyCode90, không phải 122

Bản demo trực tuyến: http://jsfiddle.net/29sVC/

Để làm rõ, mã khóa không giống như mã ký tự.

Mã ký tự dành cho văn bản (chúng khác nhau tùy thuộc vào cách mã hóa, nhưng trong nhiều trường hợp, 0-127 vẫn là mã ASCII). Mã khóa ánh xạ tới các phím trên bàn phím. Ví dụ, trong ký tự unicode 0x22909 có nghĩa là 好. Không có nhiều bàn phím (nếu có) thực sự có một phím cho việc này.

Hệ điều hành đảm nhận việc chuyển đổi các tổ hợp phím thành mã ký tự bằng cách sử dụng các phương thức nhập mà người dùng đã cấu hình. Kết quả được gửi đến sự kiện nhấn phím. (Trong khi việc nhấn phím và nhấn phím phản hồi người dùng nhấn các nút chứ không phải nhập văn bản.)


1
Cảm ơn, nó hoạt động. Tại sao onkeypress và keyCode 122 không hoạt động?
Paul Johnston

Làm thế nào để ngăn chặnDefault () thay vì cảnh báo trong giải pháp của bạn? Tôi đang thử nghiệm cho Ctrl + t.
Surendra Jnawali

@SJnawali: Tôi không chắc điều đó có thể xảy ra đối vớictrl+t
zerkms

4
tại sao keyCode 122 không hoạt động? tốt, 122dành cho phím F11 :)
Baby

7
@PaulJohnston Vì mã khóa không giống với mã ký tự . Các mã ký tự dành cho văn bản (chúng khác nhau tùy thuộc vào cách mã hóa, nhưng trong nhiều trường hợp, 0-127 vẫn là mã ASCII). Mã khóa ánh xạ tới các phím trên bàn phím. Ví dụ, trong ký tự unicode 0x22909 có nghĩa là 好. Không có nhiều bàn phím (nếu có) thực sự có một phím cho việc này. Hệ điều hành đảm nhận việc chuyển đổi các tổ hợp phím thành mã ký tự bằng các phương thức nhập mà người dùng đã cấu hình. Kết quả được gửi đến keypresssự kiện. (Trong khi keydownkeyupphản hồi khi người dùng nhấn các nút chứ không phải nhập văn bản.)
Aidiakapi

28

Đối với những người tương lai vấp phải câu hỏi này, đây là một phương pháp tốt hơn để hoàn thành công việc:

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'z') {
    alert('Undo!');
  }
});

Việc sử dụng event.keyđơn giản hóa mã, loại bỏ các hằng số được mã hóa cứng. Nó có hỗ trợ cho IE 9+.

Ngoài ra, sử dụng document.addEventListenercó nghĩa là bạn sẽ không cản trở những người nghe khác tham gia cùng một sự kiện.

Cuối cùng, không có lý do gì để sử dụng window.event. Nó chủ động không được khuyến khích và có thể dẫn đến mã dễ vỡ.


Hơn nữa, tôi muốn nói thêm rằng KeyboardEvent.keyCodenó hiện không được dùng nữa kể từ một vài năm trước. Cách tốt nhất để nắm bắt tất cả các trình duyệt là kiểm tra e.keytrước và sau đó dự phòng e.keyCode. Hoặc bạn có thể sử dụng polyfill này
Có Barry

9

Ctrl+ tcũng được ... chỉ cần dùng mã khóa là 84 like

if (evtobj.ctrlKey && evtobj.keyCode == 84) 
 alert("Ctrl+t");

6
$(document).keydown(function(e){
  if( e.which === 89 && e.ctrlKey ){
     alert('control + y'); 
  }
  else if( e.which === 90 && e.ctrlKey ){
     alert('control + z'); 
  }          
});

Bản giới thiệu


3

90 là Zchìa khóa và điều này sẽ thực hiện việc nắm bắt cần thiết ...

function KeyPress(e){
     // Ensure event is not null
     e = e || window.event;

     if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) {
         // Ctrl + Z
         // Do Something
     }
}

Tùy thuộc vào yêu cầu của bạn, bạn có thể muốn thêm một e.preventDefault();trong câu lệnh if để thực hiện độc quyền chức năng tùy chỉnh của bạn.


-3

Plugin này do tôi tạo có thể hữu ích.

Cắm vào

Bạn có thể sử dụng plugin này, bạn phải cung cấp các Mã chính và chức năng để chạy như thế này

simulatorControl([17,90], function(){console.log('You have pressed Ctrl+Z');});

Trong mã, tôi đã hiển thị cách thực hiện cho Ctrl+ Z. Bạn sẽ nhận được Tài liệu chi tiết trên liên kết. Plugin nằm trong phần Mã JavaScript Của Bút của tôi trên Codepen.


-5

Sử dụng mã này cho CTRL+ Z. mã khóa cho Zkhi nhấn phím là 122 và CTRL+ Zlà 26. hãy kiểm tra mã khóa này trong khu vực bảng điều khiển của bạn

 $(document).on("keypress", function(e) {
       console.log(e.keyCode);
       /*ctrl+z*/
       if(e.keyCode==26)
       {
          //your code here
       }
    });
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.