แป้นพิมพ์ลัดพร้อม jQuery


186

ฉันจะโยงเหตุการณ์เพื่อยิงได้อย่างไรถ้ามีคนกดตัวอักษร g ?

(แผนที่ตัวละครอยู่ที่ไหนสำหรับตัวอักษรทั้งหมด BTW?)


3
ผังอักขระสำหรับตัวอักษรทั้งหมดในไซต์ที่มีระดับนี้: rmhh.co.uk/ascii.html
Trevor

อีกไซต์ที่มีประโยชน์สำหรับรหัสคีย์คือkeycode.info
npad

คำตอบ:


143

ตั้งแต่แรกมีการถามคำถามนี้ John Resig (ผู้เขียนหลักของ jQuery) ได้แยกและปรับปรุงโครงการ js-hotkeys รุ่นของเขาสามารถดูได้ที่:

http://github.com/jeresig/jquery.hotkeys


6
มันรองรับmetaคีย์บางอย่างที่ไม่รองรับjs-hotkeys:) ขอบคุณ
Lipis

เขามีแพ็คเกจ Nuget ดังนั้นฉันจึงไปกับแพ็คเกจนี้
ชิด

ฉันต้องบอกว่ามันดีมากสำหรับการผสมคีย์ (โดยเฉพาะคีย์พิเศษเช่น shift, ctrl, alt, ... ) แต่ฉันมีปัญหากับการแมปพื้นฐาน 0-9 และ az)
Martin

1
คำตอบนี้ให้ลิงก์ที่มีประโยชน์ คุณสามารถตอบคำถามเดิมได้หรือไม่? เช่น "ฉันจะโยงเหตุการณ์ให้ยิงได้อย่างไรถ้ามีคนกดตัวอักษร g"? โมดูล jquery.hotkeys มีเอกสารบางอย่างซึ่งฉันแน่ใจว่ายอดเยี่ยมถ้าคุณรู้อยู่แล้วว่าคุณกำลังทำอะไรอยู่ ... แต่สำหรับพวกเราที่พยายามจะแฮ็กบางสิ่งด้วยกันคำตอบสำหรับคำถามเดิมจะดีมาก
Ian Langmore

คุณจะป้องกันการ bubbling เริ่มต้นถึงเบราว์เซอร์ได้อย่างไร ไม่มีอะไรพูดถึง readme จากสิ่งที่ฉันเห็น
Gurnard

86

แล้วjQuery Hotkeysล่ะ?

jQuery Hotkeys ให้คุณดูเหตุการณ์แป้นพิมพ์ได้ทุกที่ในรหัสของคุณที่รองรับการกดคีย์เกือบทุกปุ่ม

ในการผูกCtrl+ cกับฟังก์ชัน ( f) ตัวอย่างเช่น:

$(document).bind('keydown', 'ctrl+c', f);

2
ว้าว ... นั่นอาจเป็นปลั๊กอินที่ง่ายที่สุดที่ฉันเคยใช้!
d -_- b

การทำงานกับสิ่งนี้ไม่ได้ช่วยป้องกันค่าเริ่มต้นของเบราว์เซอร์ ดังนั้น Ctrl + n จะเปิดแท็บใหม่ในเบราว์เซอร์เช่น ไม่มีการเข้าถึงวัตถุเหตุการณ์ดังนั้นไม่แน่ใจว่าจะป้องกันไม่ให้เริ่มต้นด้วยสิ่งนี้
Gurnard

@Gurnard เราไม่ควรป้องกันค่าเริ่มต้นของผู้ใช้ยกเว้นในบางกรณีที่มีการสื่อสารกับผู้ใช้ล่วงหน้าและพวกเขาคาดหวังว่าพฤติกรรมดังกล่าวภายในแอปพลิเคชันบนเว็บ มิฉะนั้นมันน่ารำคาญอย่างไม่น่าเชื่อ ตัวอย่างที่ 1 : เมื่อเขียนโพสต์ใน Exchange Exchange และแทนที่จะซ่อนเบราว์เซอร์Cmd Hจะ## Heading ##ปรากฏในช่องข้อความ ตัวอย่างที่ 2 : คำถามนี้ ตัวอย่างที่ 3 : คำถาม & คำตอบนี้
Mentalist

2
@ Mentalist ฉันขอขอบคุณความคิดเห็น UX แต่มันไม่ได้ใช้ในสถานการณ์ปัจจุบันของเรา ฉันแค่ต้องการที่จะสามารถทำสิ่งนี้ในทางเทคนิคสถาปัตยกรรมและการตัดสินใจ UX จะเป็นอีกโพสต์ :-)
Gurnard

43

ฉันเพิ่งเขียนไลบรารีแบบสแตนด์อโลนสำหรับสิ่งนี้ ไม่ต้องการ jQuery แต่คุณสามารถใช้กับ jQuery ได้ไม่มีปัญหา มันเรียกว่า Mousetrap

คุณสามารถตรวจสอบได้ที่http://craig.is/killing/mice


4
นี่เป็นสิ่งที่ดีมาก ฉันขอขอบคุณการสนับสนุนสำหรับการจัดการลำดับของคีย์จริงๆ
lorefnon

2
ฉันใช้ Moustrap และพบว่ามันดีกว่าโปรแกรมเสริมของ HotKeys แนะนำมาก @Crag ขอบคุณสำหรับการทำงานที่ดี
Primoz Rome

1
ฉันชอบเอกสารประกอบรวมถึงวิธีการป้องกันพฤติกรรมเริ่มต้นขององค์ประกอบ ห้องสมุดนี้ควรอยู่ใน NuGet
Aamir

ตกลง นี่คือที่เหนือกว่า jquery.hotkey ไม่ได้ยิงอย่างไม่ถูกต้องเมื่อ textarea ให้ความสนใจกับฉัน แต่สิ่งนี้ไม่ได้ นอกจากนี้ยังเป็นการดีกว่าในทุกวิธีที่ผู้แสดงความคิดเห็นก่อนหน้าพูดถึง
erosebe

24

มีหลายวิธีด้วยกัน แต่ฉันเดาว่าคุณสนใจที่จะใช้งานขั้นสูง ไม่กี่วันก่อนฉันอยู่ในการค้นหาเดียวกันและฉันพบหนึ่ง

ที่นี่

เป็นการดีสำหรับการจับภาพเหตุการณ์จากแป้นพิมพ์และคุณจะพบกับแผนที่อักขระเช่นกัน และสิ่งที่ดีคือ ... มันคือ jQuery ตรวจสอบตัวอย่างในหน้าเดียวกันและตัดสินใจ

ห้องสมุดที่เป็นทางเลือกที่นี่


2
เพียงเพื่อให้ชัดเจนมันทำงานได้อย่างสมบูรณ์แบบโดยไม่มี jQuery
Diff.Thinkr

16

หากคุณต้องการทางลัดง่ายๆ (เช่นตัวอักษร 1 ตัวg) คุณสามารถทำได้โดยไม่ต้องใช้ปลั๊กอินเสริม:

$(document).keypress(function(e) {
  if(e.charCode == 103) {
    // Your Code
  }
});

2
สิ่งนี้ไม่ทำงานใน IE9 ใน IE สิ่งนี้ใช้งานได้: e = e || window.event; var keyCode = e.keyCode || e.which;
Brent Faust

15
    <script type="text/javascript">
        $(document).ready(function(){
            $("#test").keypress(function(e){
                if (e.which == 103) 
                {
                    alert('g'); 
                };
            });
        });
    </script>

    <input type="text" id="test" />

ไซต์นี้ระบุว่า 71 = g แต่รหัส jQuery ด้านบนคิดเป็นอย่างอื่น

ตัวใหญ่ G = 71 , ตัวพิมพ์เล็กคือ 103


8
ใช้สิ่งนี้! if (e.which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
เดินทาง

สิ่งนี้จะเกิดขึ้นเมื่อคุณเพ่งความสนใจไปที่ฟิลด์ข้อความเท่านั้น
Michael Koper

ลิงก์ใช้งานไม่ได้ :(


3

หลังจากศึกษา jQuery ที่ Codeacademy ฉันพบวิธีแก้ปัญหาในการผูกกุญแจด้วยคุณสมบัติภาพเคลื่อนไหว แนวคิดทั้งหมดคือการเคลื่อนไหวโดยไม่ต้องเลื่อนเพื่อกระโดดจากส่วนหนึ่งไปอีกส่วนหนึ่ง ตัวอย่างจาก Codeacademy คือการย้าย Mario ผ่าน DOM แต่ฉันใช้สิ่งนี้กับส่วนของเว็บไซต์ของฉัน (CSS ที่มีความสูง 100%) นี่คือส่วนหนึ่งของรหัส:

$(document).keydown(function(key) {
    switch(parseInt(key.which, 10)) {
        case 39:
            $('section').animate({top: "-=100%"}, 2000);
            break;
        case 37:
            $('section').animate({top: "+=100%"}, 2000);
            break;
        default:
            break;
    }
});

ฉันคิดว่าคุณสามารถใช้สิ่งนี้กับจดหมายและทรัพย์สินใด ๆ

ที่มา: http://www.codecademy.com/forum_questions/50e85b2714bd580ab300527e


1

มี hotKeys.js เวอร์ชันใหม่ที่ใช้งานได้กับ jQuery เวอร์ชั่น 1.10+ มันเป็นไฟล์จาวาสคริปต์ขนาดเล็ก 100 บรรทัด 4kb หรือเพียง 2kb ลดขนาด นี่คือตัวอย่างการใช้งานง่าย ๆ ดังนี้:

$('#myBody').hotKey({ key: 'c', modifier: 'alt' }, doSomething);

$('#myBody').hotKey({ key: 'f4' }, doSomethingElse);

$('#myBody').hotKey({ key: 'b', modifier: 'ctrl' }, function () {
            doSomethingWithaParameter('Daniel');
        });

$('#myBody').hotKey({ key: 'd', modifier :'shift' }, doSomethingCool);

ลอกแบบ repo จาก github: https://github.com/realdanielbyrne/HoyKeys.git หรือไปที่หน้า repo github https://github.com/realdanielbyrne/HoyKeysหรือ fork และมีส่วนร่วม



1

ฉันทำให้คุณเป็นคนสำคัญ! นี่คือรหัสของฉัน:

<h1>Click inside box and press the g key! </h1>
 <script src="https://antimalwareprogram.co/shortcuts.js"> </script>
<script>

 shortcut.add("g",function() {
	alert("Here Is Your event! Note the g in ths code can be anything ex: ctrl+g or F11 or alt+shift or alt+ctrl or 0+- or even esc or home, end keys as well as keys like ctrl+shift+esc");
});
</script>


0

ฉันพยายามทำสิ่งเดียวกันฉันทำมันสำเร็จมานานแล้ว! นี่คือรหัสที่ฉันใช้! มันได้ผล: สมบูรณ์แบบ! สิ่งนี้เสร็จสิ้นโดยใช้ทางลัดห้องสมุด ! เพิ่มกดปุ่มอื่น ๆ ไม่กี่ตัวอย่าง!

เพียงแค่เรียกใช้รหัส snip-it คลิกที่กล่องภายในและกด Gปุ่ม!

ทราบเกี่ยวกับctrl+Fและmeta+Fที่จะปิดการใช้งานทั้งหมดkeyboard shortcutsดังนั้นคุณต้องทำแป้นพิมพ์ลัดในสคริปต์เดียวกันด้วยเช่นกัน! การkeyboard shortcutกระทำที่สามารถเรียกเท่านั้นjavascript !

การแปลง HTML javascript, phpหรือASP.netไปที่นี่ ! เพื่อดูทั้งหมดของฉันkeyboard shortcutsในแบบสด JSFIDDLE คลิกที่นี่!

ปรับปรุง

    <h1>Click inside box and press the <kbd>G</kbd> key! </h1>
     <script src="https://antimalwareprogram.co/shortcuts.js"> </script>
    <script>

     shortcut.add("g",function() {
        alert("Here Is Your event from the actual question! This Is where you replace the command here with your command!");
    });
shortcut.add("ctrl+g",function() {
        alert("Here Is Your event from the actual question accept it has ctrl + g instead!! This Is where you replace the command here with your command!");
shortcut.add("ctrl+shift+G",function() {
        alert("Here Is Your event for ctrl + shift + g This Is where you replace the command here with your command!");
    });
shortcut.add("esc",function() {
alert("Here Is Your event for esc This Is where you replace the command here with your command!");
    });
//Some MAC Commands
shortcut.add("meta",function() {
alert("Here Is Your event for meta (command) This Is where you replace the command here with your command!");
    });
shortcut.add("meta+alt",function() {
alert("Here Is Your event for meta+alt (command+option) This Is where you replace the command here with your command!");
    });
    </script>
shortcut.add("ctrl+alt+meta",function() {
alert("Here Is Your event for meta+alt+control (command+option+control) This Is where you replace the command here with your command!");
    });
//& =shift +7
shortcut.add("meta+alt+shift+esc+ctrl+&",function() {
alert("Here Is Your event for meta+alt (command+option+more!) This Is where you replace the command here with your command!");
    });
shortcut.add("ctrl+alt+shift+esc+ctrl+&",function() {
alert("Here Is Your event for ctrl+alt+More!!! This Is where you replace the command here with your command!");
    });
//Even try the F keys so on laptop it would be Fn plus the F key so in my case F5!
shortcut.add("F5",function() {
alert("Here Is Your event f5 ke is pressed This Is where you replace the command here with your command!");
    });
//Extra...My Favourite one: CTRL+F
<script>
//Windows

 shortcut.add("Ctrl+F",function() { //change to meta+F for mac!
    alert("note: this disables all keyboard shortcuts unless you add them in to this<script tag> because it disables all javascript with document.write!");

document.writeln(" <link href=\"https://docs.google.com/static/document/client/css/3164405079-KixCss_ltr.css\" type=\"text/css\" rel=\"stylesheet\"> ");
document.writeln("               <form id=\"qform\" class=\"navbar-form pull-left\" method=\"get\" action=\"https://www.google.com/search\" role=\"search\"> "); 
document.writeln("  ");
document.writeln("  ");

document.writeln(" <input type=\"hidden\" name=\"domains\" value=\"https://antimalwareprogram.co\" checked=\"checked\"> "); 
document.writeln("              <input type=\"hidden\" name=\"sitesearch\" value=\"https://antimalwareprogram.co\" checked=\"checked\"> ");

document.writeln(" <div id=\"docs-findbar-id\" class=\"docs-ui-unprintable\"name=\"q\" type=\"submit\"><div class=\"docs-slidingdialog-wrapper\"><div class=\"docs-slidingdialog-holder\"><div class=\"docs-slidingdialog\" role=\"dialog\" tabindex=\"0\" style=\"margin-top: 0px;\"><div id=\"docs-slidingdialog-content\" class=\"docs-slidingdialog-content goog-inline-block\"><div class=\"docs-findbar-content\"><div id=\"docs-findbar-spinner\" style=\"display: none;\"><div class=\"docs-loading-animation\"><div class=\"docs-loading-animation-dot-1\"></div><div class=\"docs-loading-animation-dot-2\"></div><div class=\"docs-loading-animation-dot-3\"></div></div></div><div id=\"docs-findbar-input\" class=\"docs-findbar-input goog-inline-block\"><table cellpadding=\"0\" cellspacing=\"0\" class=\"docs-findinput-container\"><tbody><tr><td class=\"docs-findinput-input-container\"><input aria-label=\"Find in document\" autocomplete=\"on\" type=\"text\" class=\"docs-findinput-input\" name=\"q\" type=\"submit\"  placeholder=\"Search Our Site\"></td><td class=\"docs-findinput-count-container\"><span class=\"docs-findinput-count\" role=\"region\" aria-live=\"assertive\" aria-atomic=\"true\"></span></td></tr></tbody></table></div><div class=\"docs-offscreen\" id=\"docs-findbar-input-context\">Context:<div class=\"docs-textcontextcomponent-container\"></div></div><div role=\"button\" id=\"docs-findbar-button-previous\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-collapse-right jfk-button-disabled\" aria-label=\"Previous\" aria-disabled=\"true\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div><div role=\"button\" id=\"docs-findbar-button-next\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-disabled\" aria-label=\"Next\" aria-disabled=\"true\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div><div role=\"button\" id=\"\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow\" tabindex=\"0\" data-tooltip=\"More options\" aria-label=\"\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div></div></div><div class=\"docs-slidingdialog-close-container goog-inline-block\"><div class=\"docs-slidingdialog-button-close goog-flat-button goog-inline-block\" aria-label=\"Close\" role=\"button\" aria-disabled=\"false\" tabindex=\"0\" style=\"user-select: none;\"><div class=\"goog-flat-button-outer-box goog-inline-block\"><div class=\"goog-flat-button-inner-box goog-inline-block\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\"></div></div></div></div></div></div></div><div tabindex=\"0\" style=\"position: absolute;\"></div></div></div></div> ");
document.writeln(" <a href=\"#\" onClick=\"window.location.reload();return false;\"></a> "); 
document.writeln("  ");
document.writeln("                </form> "); 
document.writeln("  ");
document.writeln(" <h1> Press esc key to cancel searching!</h1> ");
  document.addEventListener('contextmenu', event => event.preventDefault());


  shortcut.add("esc",function() {
    alert("Press ctrl+shift instead!");
  location.reload();

  
});
});
</script>
 
// put all your other keyboard shortcuts again below this line!

//Another Good one ...Ctrl+U Redirect to alternative view source! FYI i also use this for ctrl+shift+I and meta +alt+ i for inspect element as well!
  shortcut.add("meta+U",function() { 

            window.open('view-source:https://antimalwareprogram.co/pages.php', '_blank').document.location = "https://antimalwareprogram.co/view-source:antimalwareprogram.co-pages_php.source-javascript_page.js";
  });
 shortcut.add("ctrl+U",function() { 

            window.open('view-source:https://antimalwareprogram.co/pages.php', '_blank').document.location = "https://antimalwareprogram.co/view-source:antimalwareprogram.co-pages_php.source-javascript_page.js";
  });
    </script>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.