ตรวจสอบว่าคีย์ไม่ทำงานหรือไม่?

มีวิธีตรวจสอบว่าคีย์ลงใน JavaScript หรือไม่?

ฉันรู้เกี่ยวกับเหตุการณ์ "คีย์ดาวน์" แต่นั่นไม่ใช่สิ่งที่ฉันต้องการ บางครั้งหลังจากกดปุ่มฉันต้องการตรวจสอบว่ายังกดอยู่หรือไม่

ป.ล. ปัญหาที่ใหญ่ที่สุดดูเหมือนว่าหลังจากผ่านไประยะหนึ่งคีย์จะเริ่มทำงานซ้ำทำให้เกิดเหตุการณ์คีย์ดาวน์และคีย์อัพเหมือนปีศาจ หวังว่าจะมีฟังก์ชั่น isKeyDown (คีย์) ง่ายๆ แต่ถ้าไม่เช่นนั้นปัญหานี้จะต้องได้รับการแก้ไข / แก้ไข

มีวิธีตรวจสอบว่าคีย์ลงใน JavaScript หรือไม่?

ไม่ ความเป็นไปได้เพียงอย่างเดียวคือการตรวจสอบแต่ละkeyupและkeydownและการจดจำ

หลังจากผ่านไประยะหนึ่งคีย์จะเริ่มทำซ้ำโดยจะเริ่มการทำงานของคีย์ดาวน์และคีย์อัพเหมือนปีศาจ

มันไม่ควร คุณจะต้องkeypressทำซ้ำอย่างแน่นอนและในหลาย ๆ เบราว์เซอร์คุณจะได้รับการทำซ้ำkeydownแต่ถ้าkeyupทำซ้ำจะเป็นข้อบกพร่อง

น่าเสียดายที่มันไม่ใช่ข้อผิดพลาดที่ไม่เคยมีมาก่อน: บน Linux, Chromium และ Firefox (เมื่อทำงานภายใต้ GTK + ซึ่งอยู่ใน distros ยอดนิยมเช่น Ubuntu) ทั้งคู่สร้างลำดับการกดคีย์อัพ - การกด - คีย์ดาวน์ซ้ำสำหรับคีย์ที่เก็บไว้ ซึ่งเป็นไปไม่ได้ที่จะแยกความแตกต่างจากคนที่ตอกกุญแจเร็วมาก

นอกเหนือจากการใช้keyupและkeydownฟังเพื่อติดตามว่าเมื่อใดคีย์ลงและสำรองข้อมูลแล้วยังมีคุณสมบัติบางอย่างที่บอกคุณว่าคีย์บางปุ่มไม่ทำงานหรือไม่

window.onmousemove = function (e) {
  if (!e) e = window.event;
  if (e.shiftKey) {/*shift is down*/}
  if (e.altKey) {/*alt is down*/}
  if (e.ctrlKey) {/*ctrl is down*/}
  if (e.metaKey) {/*cmd is down*/}
}

นี้มีอยู่ในทุกเบราว์เซอร์ที่สร้างวัตถุเหตุการณ์เช่นจากkeydown, keyupและkeypressดังนั้นคุณจึงไม่จำเป็นต้องใช้ mousemove

ฉันพยายามสร้างวัตถุเหตุการณ์ของตัวเองกับdocument.createEvent('KeyboardEvent')และdocument.createEvent('KeyboardEvent')และกำลังมองหาe.shiftKeyและเช่น แต่ฉันไม่มีโชค

ฉันใช้ Chrome 17 บน Mac

วิธีแก้ปัญหาของฉัน:

var pressedKeys = {};
window.onkeyup = function(e) { pressedKeys[e.keyCode] = false; }
window.onkeydown = function(e) { pressedKeys[e.keyCode] = true; }

ตอนนี้ฉันสามารถตรวจสอบว่ามีการกดปุ่มใดที่อื่นในสคริปต์หรือไม่โดยการตรวจสอบ

pressedKeys["code of the key"]

ถ้าเป็นจริงให้กดปุ่ม

ฉันไม่เชื่อว่าจะมีฟังก์ชัน isKeyDown แต่คุณสามารถเขียนของคุณเองได้

โดยทั่วไปให้สร้างอาร์เรย์ที่มีความยาวเท่ากับจำนวนคีย์ที่คุณต้องการมอนิเตอร์ จากนั้นใช้เอกสาร / หน้า / ควบคุม keyUp และเหตุการณ์ keyDown อัปเดตอาร์เรย์ด้วยสถานะของคีย์นั้น

จากนั้นเขียนฟังก์ชั่นที่ตรวจสอบว่าคีย์บางปุ่มหยุดทำงานหรือไม่และส่งคืนบูล

var keyEnum = { W_Key:0, A_Key:1, S_Key:2, D_Key:3 };
var keyArray = new Array(4);

function onKeyDown()
{
    // Detect which key was pressed
    if( key == 'w' )
        keyArray[keyEnum.W_Key] = true;
    // Repeat for each key you care about...
}

function onKeyUp()
{
    // Detect which key was released
    if( key == 'w' )
        keyArray[keyEnum.W_Key] = false;
    // Repeat for each key you care about...
}

function isKeyDown(key)
{
    return keyArray[key];
}

นั่นควรจะบรรลุสิ่งที่คุณต้องการ

ลงเอยที่นี่เพื่อตรวจสอบว่ามีบางอย่างในเบราว์เซอร์อยู่แล้วหรือไม่ แต่ดูเหมือนว่าไม่มี นี่คือวิธีแก้ปัญหาของฉัน (คล้ายกับคำตอบของโรเบิร์ตมาก):

"use strict";

const is_key_down = (() => {
    const state = {};

    window.addEventListener('keyup', (e) => state[e.key] = false);
    window.addEventListener('keydown', (e) => state[e.key] = true);

    return (key) => state.hasOwnProperty(key) && state[key] || false;
})();

จากนั้นคุณสามารถตรวจสอบว่ามีการกดปุ่มด้วยis_key_down('ArrowLeft')หรือไม่

คนอื่นเคยถามคำถามประเภทนี้มาก่อน (แม้ว่าตอนนี้ฉันจะไม่เห็นสิ่งที่ผิดปกติใด ๆ ที่ชัดเจน)

ฉันคิดว่าคำตอบคือkeydownเหตุการณ์ (และคู่แฝดkeyup) เป็นข้อมูลทั้งหมดที่คุณได้รับ การทำซ้ำมีการต่อสายเข้ากับระบบปฏิบัติการอย่างแน่นหนาและโปรแกรมแอปพลิเคชันไม่ได้รับโอกาสมากนักในการสืบค้น BIOS สำหรับสถานะที่แท้จริงของคีย์

สิ่งที่คุณทำได้และอาจต้องทำหากต้องการให้มันทำงานได้คือการยกเลิกการตีกลับคีย์โดยทางโปรแกรม โดยพื้นฐานแล้วคุณสามารถประเมินkeydownและkeyupตัวเองได้ แต่เพิกเฉยต่อkeyupเหตุการณ์หากเกิดขึ้นเร็วเกินไปหลังจากช่วงสุดท้ายkeydown... หรือโดยพื้นฐานแล้วคุณควรชะลอการตอบสนองให้keyupนานพอที่จะแน่ใจว่าไม่มีkeydownเหตุการณ์อื่นตามมาด้วยเช่น 0.25 วินาทีของkeyup.

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

/*
Tracks what keys are currently down on the keyboard
*/

function keyboard_module(onUpdate){
    var kb = {};
    var unicode_mapping = {};
    document.onkeydown = function(e){
        var unicode=e.charCode? e.charCode : e.keyCode
        var key = getKey(unicode);
        kb[key] = true;
        if(onUpdate){
            onUpdate(kb);
        }
    }

    document.onkeyup = function(e){
        var unicode=e.charCode? e.charCode : e.keyCode
        var key = getKey(unicode);
        delete kb[key];
        if(onUpdate){
            onUpdate(kb);
        }
    }

    function getKey(unicode){
        if(unicode_mapping[unicode]){
            var key = unicode_mapping[unicode];
        }else{
            var key= unicode_mapping[unicode] = String.fromCharCode(unicode);
        }
        return key;
    }
    return kb;
}

function testing(kb){
    console.log('These are the down keys', kb);
}


var keyboard = keyboard_module(testing);

....
//somewhere else in the code
if(keyboard['K']){/*do something special */}

รหัสต่อไปนี้คือสิ่งที่ฉันใช้:

var altKeyDownCount = 0;
window.onkeydown = function (e) {
    if (!e) e = window.event;
    if (e.altKey) {
        altKeyDownCount++;
        if (30 < altKeyDownCount) {
            $('.key').removeClass('hidden');
            altKeyDownCount = 0;
        }
        return false;
    }
}

window.onkeyup = function (e) {
    if (!e) e = window.event;
    altKeyDownCount = 0;
    $('.key').addClass('hidden');
}

เมื่อผู้ใช้กดปุ่ม Alt ค้างไว้สักพัก (ประมาณ 2 วินาที) กลุ่มของป้ายกำกับ (class = 'key hidden') จะปรากฏขึ้น เมื่อปล่อยปุ่ม Alt ป้ายกำกับจะหายไป ใช้ jQuery และ Bootstrap

ฉันรู้ว่านี่เป็นคำถามที่เก่ามาก แต่มีไลบรารี JavaScript (~ .5Kb) ที่มีน้ำหนักเบามากซึ่ง "แก้ไข" อย่างมีประสิทธิภาพในการทำงานของตัวจัดการเหตุการณ์แป้นพิมพ์ที่ไม่สอดคล้องกันเมื่อใช้ DOM API

ห้องสมุดเป็นKeydrown

นี่คือตัวอย่างรหัสการดำเนินการที่ทำงานได้ดีสำหรับวัตถุประสงค์ของฉันเพียงแค่เปลี่ยนคีย์ที่จะตั้งค่าผู้ฟัง:

kd.P.down(function () {
  console.log('The "P" key is being held down!');
});

kd.P.up(function () {
  console.clear();
});

// This update loop is the heartbeat of Keydrown
kd.run(function () {
  kd.tick();
});

ฉันได้รวม Keydrown ไว้ใน JavaScript ฝั่งไคลเอ็นต์ของฉันเพื่อหยุดภาพเคลื่อนไหวที่เหมาะสมในเกม Red Light Green Light ที่ฉันกำลังเขียน คุณสามารถดูเกมทั้งหมดที่นี่ (หมายเหตุ: หากคุณกำลังอ่านสิ่งนี้ในอนาคตเกมควรเป็นรหัสที่สมบูรณ์และเล่นได้ :-D!)

ฉันหวังว่านี่จะช่วยได้.

ฉันได้สแกนคำตอบข้างต้นแล้วข้อเสนอkeydown/ keyupแนวทางใช้ได้เฉพาะในสถานการณ์พิเศษเท่านั้น หากผู้ใช้อยู่ห่างจากแท็บหรือใช้ท่าทางสัมผัสเพื่อเปิดหน้าต่างเบราว์เซอร์หรือแท็บใหม่keydownจะมีการลงทะเบียนซึ่งเป็นเรื่องปกติเพราะ ณ จุดนั้นมันเป็นไปไม่ได้ที่จะบอกว่าคีย์เป็นสิ่งที่เว็บแอปกำลังตรวจสอบอยู่หรือไม่ หรือเป็นเบราว์เซอร์มาตรฐานหรือทางลัดของระบบปฏิบัติการ กลับมาที่หน้าเบราว์เซอร์ก็จะยังคงคิดว่าคีย์นั้นค้างอยู่แม้ว่าจะเปิดตัวในระหว่างนี้ หรือคีย์บางปุ่มจะถูกเก็บไว้ในขณะที่ผู้ใช้เปลี่ยนไปใช้แท็บหรือแอปพลิเคชันอื่นด้วยเมาส์จากนั้นจึงปล่อยออกนอกหน้าของเรา

ปุ่มตัวปรับแต่ง ( Shiftฯลฯ ) สามารถตรวจสอบได้ผ่านทางmousemoveฯลฯ โดยสมมติว่าคาดว่าจะมีการโต้ตอบของเมาส์อย่างน้อยหนึ่งครั้งเมื่อแท็บย้อนกลับซึ่งมักจะเป็นเช่นนั้น

สำหรับส่วนปุ่มอื่น ๆ (ยกเว้นการปรับเปลี่ยน, Tab, Deleteแต่รวมSpace, Enter), การตรวจสอบkeypressจะทำงานสำหรับการใช้งานมากที่สุด - ปุ่มขึ้นลงจะยังคงเกิดไฟไหม้ แม้ว่าจะมีความล่าช้าในการรีเซ็ตคีย์เนื่องจากระยะเวลาในkeypressการเริ่มทำงาน โดยทั่วไปหากkeypressไม่ทำการยิงต่อไปก็เป็นไปได้ที่จะแยกแยะคีย์ส่วนใหญ่ นี้รวมกับการปรับเปลี่ยนเป็นสุญญากาศสวย แต่ฉันยังไม่ได้สำรวจสิ่งที่จะทำอย่างไรกับและTabBackspace

ฉันแน่ใจว่ามีห้องสมุดอยู่ที่นั่นซึ่งเป็นนามธรรมเกี่ยวกับจุดอ่อนของ DOM นี้หรืออาจมีการเปลี่ยนแปลงมาตรฐาน DOM บางอย่างที่ดูแลมันเนื่องจากเป็นคำถามที่ค่อนข้างเก่า

ดูที่นี้คำตอบและการใช้งานและonkeyup นี่คือข้อมูลเฉพาะเพิ่มเติมเกี่ยวกับเหตุการณ์เหล่านั้นonkeydown

ใช้งานได้ใน Firefox และ Chrome

ฉันจำเป็นต้องเปิดไฟล์ html พิเศษในเครื่อง (โดยการกดEnterเมื่อไฟล์ถูกเลือกใน file explorer ใน Windows) ไม่ว่าจะเพื่อดูไฟล์หรือแก้ไขในโปรแกรมแก้ไขออนไลน์พิเศษ

ดังนั้นผมจึงอยากจะเห็นความแตกต่างระหว่างทั้งสองตัวเลือกโดยถือลงCtrl-key Enterหรือไม่ในขณะที่กด

อย่างที่คุณเข้าใจจากคำตอบทั้งหมดที่นี่ดูเหมือนว่าจะไม่สามารถทำได้จริง ๆ แต่นี่เป็นวิธีที่เลียนแบบพฤติกรรมนี้ในแบบที่ฉันยอมรับได้

วิธีการทำงานเป็นดังนี้:

หากคุณกดปุ่มCtrl-key ค้างไว้เมื่อเปิดไฟล์เหตุการณ์คีย์ดาวน์จะไม่เริ่มทำงานในโค้ดจาวาสคริปต์ แต่เหตุการณ์Ctrlคีย์อัพจะเริ่มทำงาน (เมื่อคุณปล่อยคีย์ในที่สุด) รหัสจับสิ่งนั้น

นอกจากนี้โค้ดยังปิดการทำงานของคีย์ (ทั้งคีย์อัพและคีย์ดาวน์) ทันทีที่เกิดขึ้น ดังนั้นหากคุณกดCtrl-key หลังจากเปิดไฟล์แล้วจะไม่มีอะไรเกิดขึ้น

window.onkeyup = up;
window.onkeydown = down;
function up(e) {
  if (e.key === 'F5') return; // if you want this to work also on reload with F5.

  window.onkeyup = null;
  window.onkeyup = null;
  if (e.key === 'Control') {
    alert('Control key was released. You must have held it down while opening the file, so we will now load the file into the editor.');
  }         
}
function down() {
  window.onkeyup = null;
  window.onkeyup = null;
}

$('#mytextbox').keydown(function (e) {
            if (e.keyCode == 13) {
                if (e.altKey) {
                    alert("alt is pressed");
                }
            }
 });

หากคุณกด alt + enter คุณจะเห็นการแจ้งเตือน