একসাথে জাভাস্ক্রিপ্ট ব্যবহার করে একাধিক কী চাপলে কীভাবে সনাক্ত করবেন?


173

আমি একটি জাভাস্ক্রিপ্ট গেম ইঞ্জিন বিকাশের চেষ্টা করছি এবং আমি এই সমস্যাটি পেয়েছি:

  • আমি চাপলে SPACEচরিত্রটি লাফ দেয়।
  • আমি চাপলে অক্ষরটি ডানদিকে চলে যায়।

সমস্যাটি হ'ল আমি যখন ডান টিপবো এবং তারপরে স্পেস টিপব, তখন চরিত্রটি লাফিয়ে উঠে যায় এবং চলন্ত বন্ধ করে দেয়।

আমি keydownকী টিপতে ফাংশনটি ব্যবহার করি । একবারে একাধিক কী চাপা আছে কিনা তা আমি কীভাবে পরীক্ষা করতে পারি?


3
এখানে এমন একটি ওয়েব পৃষ্ঠার ডেমো যা স্বয়ংক্রিয়ভাবে চাপানো সমস্ত কীগুলির একটি তালিকা মুদ্রণ করে: স্ট্যাকওভারফ্লো.com
অ্যান্ডারসন গ্রিন

উত্তর:


327

দ্রষ্টব্য: কীকোড এখন হ্রাস করা হয়েছে।

আপনি ধারণাটি বুঝতে পারলে একাধিক কীস্ট্রোক সনাক্তকরণ সহজ

আমি যেভাবে এটি করি তা হ'ল:

var map = {}; // You could also use an array
onkeydown = onkeyup = function(e){
    e = e || event; // to deal with IE
    map[e.keyCode] = e.type == 'keydown';
    /* insert conditional here */
}

এই কোডটি খুব সহজ: যেহেতু কম্পিউটারগুলি একবারে কেবল একটি কীস্ট্রোক পাস করে, তাই একাধিক কীগুলির ট্র্যাক রাখতে একটি অ্যারে তৈরি করা হয়। অ্যারেটি একবারে এক বা একাধিক কী পরীক্ষা করতে ব্যবহার করা যেতে পারে।

কেবল ব্যাখ্যা করার জন্য, আসুন আপনি চাপুন বলে দিন Aএবং Bপ্রত্যেকটি এমন keydownইভেন্টে আগুন map[e.keyCode]দেয় যা এর মানকে নির্ধারণ করে e.type == keydownযা সত্য বা মিথ্যাটিকে মূল্যায়ন করে । এখন উভয় map[65]এবং map[66]সেট করা হয় true। যখন আপনি যেতে দিন A, keyupইভেন্টটি জ্বলে ওঠে, একই যুক্তিটির ফলে map[65](এ) এর বিপরীত ফলাফল নির্ধারণ করে , যা এখন মিথ্যা , তবে যেহেতু map[66](বি) এখনও "ডাউন" (এটি কোনও কীআপ ইভেন্টটি ট্রিগার করে না), এটা সত্য রয়ে গেছে ।

mapঅ্যারে, উভয় ঘটনা মাধ্যমে, ভালো দেখায়:

// keydown A 
// keydown B
[
    65:true,
    66:true
]
// keyup A
// keydown B
[
    65:false,
    66:true
]

আপনি এখন দুটি জিনিস করতে পারেন:

ক) আপনি যখন এক বা একাধিক কী কোডগুলি দ্রুত বের করতে চান তখন একটি কী লগার ( উদাহরণ ) পরে হিসাবে উল্লেখ হিসাবে তৈরি করা যেতে পারে। ধরে নিচ্ছি আপনি একটি এইচটিএমএল উপাদান সংজ্ঞায়িত করেছেন এবং ভেরিয়েবলের সাথে এটি নির্দেশ করেছেন element

element.innerHTML = '';
var i, l = map.length;
for(i = 0; i < l; i ++){
    if(map[i]){
        element.innerHTML += '<hr>' + i;
    }
}

দ্রষ্টব্য: আপনি সহজেই তার idগুণাবলী দ্বারা কোনও উপাদান দখল করতে পারেন ।

<div id="element"></div>

এটি এমন একটি এইচটিএমএল উপাদান তৈরি করে যা জাভাস্ক্রিপ্টের সাথে সহজেই উল্লেখ করা যেতে পারে element

alert(element); // [Object HTMLDivElement]

এমনকি আপনি এটি ব্যবহার document.getElementById()বা $()দখল করতে হবে না। তবে সামঞ্জস্যের স্বার্থে, jQuery এর ব্যবহার $()আরও বেশি প্রস্তাবিত।

স্ক্রিপ্ট ট্যাগটি এইচটিএমএলের মূল অংশের পরে আসবে তা নিশ্চিত করুন । অনুকূলকরণের পরামর্শ : বেশিরভাগ বড়-বড় ওয়েবসাইটগুলি স্ক্রিপ্ট ট্যাগটিকে অপ্টিমাইজেশনের জন্য বডি ট্যাগের পরে রাখে। এর কারণ স্ক্রিপ্ট ট্যাগটি এর স্ক্রিপ্টটি ডাউনলোড শেষ না হওয়া পর্যন্ত লোড করা থেকে আরও উপাদানকে অবরুদ্ধ করে। বিষয়বস্তুর সামনে রেখে কন্টেন্টটি আগেই লোড করার অনুমতি দেয়।

বি (যেখানে আপনার আগ্রহের বিষয়টি এখানে রয়েছে) আপনি যেখানে /*insert conditional here*/ছিলেন এমন সময়ে এক বা একাধিক কী পরীক্ষা করতে পারেন , এই উদাহরণটি ধরুন:

if(map[17] && map[16] && map[65]){ // CTRL+SHIFT+A
    alert('Control Shift A');
}else if(map[17] && map[16] && map[66]){ // CTRL+SHIFT+B
    alert('Control Shift B');
}else if(map[17] && map[16] && map[67]){ // CTRL+SHIFT+C
    alert('Control Shift C');
}

সম্পাদনা : এটি সর্বাধিক পঠনযোগ্য স্নিপেট নয়। পঠনযোগ্যতা গুরুত্বপূর্ণ, যাতে আপনি এটি চোখের কাছে আরও সহজ করার জন্য এরকম কিছু চেষ্টা করতে পারেন:

function test_key(selkey){
    var alias = {
        "ctrl":  17,
        "shift": 16,
        "A":     65,
        /* ... */
    };

    return key[selkey] || key[alias[selkey]];
}

function test_keys(){
    var keylist = arguments;

    for(var i = 0; i < keylist.length; i++)
        if(!test_key(keylist[i]))
            return false;

    return true;
}

ব্যবহার:

test_keys(13, 16, 65)
test_keys('ctrl', 'shift', 'A')
test_key(65)
test_key('A')

ইহা কি ভাল?

if(test_keys('ctrl', 'shift')){
    if(test_key('A')){
        alert('Control Shift A');
    } else if(test_key('B')){
        alert('Control Shift B');
    } else if(test_key('C')){
        alert('Control Shift C');
    }
}

(সম্পাদনার শেষ)


এই উদাহরণটিতে চেক জন্য CtrlShiftA, CtrlShiftBএবংCtrlShiftC

এটি যেমন সহজ :)

মন্তব্য

কীকোডসের ট্র্যাক রাখা

একটি সাধারণ নিয়ম হিসাবে, কোড ডকুমেন্ট করা ভাল অনুশীলন, বিশেষত কী কোডগুলির মতো জিনিস (যেমন // CTRL+ENTER) যাতে আপনি মনে করতে পারেন যে সেগুলি কী ছিল।

আপনার কী কোডগুলি ডকুমেন্টেশন ( CTRL+ENTER => map[17] && map[13], নয় map[13] && map[17]) হিসাবে একই ক্রমে রাখা উচিত । আপনাকে যখন ফিরে যেতে হবে এবং কোডটি সম্পাদনা করতে হবে তখন আপনি কখনই বিভ্রান্ত হবেন না।

যদি-অন্য শৃঙ্খলাযুক্ত একটি গটচা

যদি বিবিধ পরিমাণের কম্বো (যেমন CtrlShiftAltEnterএবং CtrlEnter) অনুসন্ধান করা হয় তবে বৃহত্তর কম্বোয়ের পরে ছোট কম্বো লাগিয়ে দিন , না হলে ছোট কম্বোগুলি বড় কম্বোগুলিকে যথেষ্ট পরিমাণে মিলিয়ে গেলে ওভাররাইড করবে। উদাহরণ:

// Correct:
if(map[17] && map[16] && map[13]){ // CTRL+SHIFT+ENTER
    alert('Whoa, mr. power user');
}else if(map[17] && map[13]){ // CTRL+ENTER
    alert('You found me');
}else if(map[13]){ // ENTER
    alert('You pressed Enter. You win the prize!')
}

// Incorrect:
if(map[17] && map[13]){ // CTRL+ENTER
    alert('You found me');
}else if(map[17] && map[16] && map[13]){ // CTRL+SHIFT+ENTER
    alert('Whoa, mr. power user');
}else if(map[13]){ // ENTER
    alert('You pressed Enter. You win the prize!');
}
// What will go wrong: When trying to do CTRL+SHIFT+ENTER, it will
// detect CTRL+ENTER first, and override CTRL+SHIFT+ENTER.
// Removing the else's is not a proper solution, either
// as it will cause it to alert BOTH "Mr. Power user" AND "You Found Me"

গোচা: "আমি কীগুলি টিপছি না তবুও এই কী কম্বোটি সক্রিয় রাখে"

সতর্কতা বা মূল উইন্ডো থেকে দৃষ্টি নিবদ্ধ করে এমন কোনও কিছু নিয়ে কাজ করার সময়, map = []শর্তটি শেষ হওয়ার পরে আপনি অ্যারেটিকে পুনরায় সেট করতে অন্তর্ভুক্ত করতে চাইতে পারেন । এটি কারণ কিছু বিষয় যেমন alert()মূল উইন্ডো থেকে ফোকাসকে দূরে সরিয়ে দেয় এবং 'কীপ' ইভেন্টটি ট্রিগার না হওয়ার কারণ করে। উদাহরণ স্বরূপ:

if(map[17] && map[13]){ // CTRL+ENTER
    alert('Oh noes, a bug!');
}
// When you Press any key after executing this, it will alert again, even though you 
// are clearly NOT pressing CTRL+ENTER
// The fix would look like this:

if(map[17] && map[13]){ // CTRL+ENTER
    alert('Take that, bug!');
    map = {};
}
// The bug no longer happens since the array is cleared

গোচা: ব্রাউজার ডিফল্ট

সমাধানটির অন্তর্ভুক্ত সহ আমি এখানে একটি বিরক্তিকর জিনিস পেয়েছি:

সমস্যা: যেহেতু ব্রাউজারটিতে সাধারণত কী কম্বোজে ডিফল্ট ক্রিয়া থাকে (যেমন CtrlDবুকমার্ক উইন্ডো সক্রিয় করে, বা CtrlShiftCম্যাক্সথনে স্কিনোট সক্রিয় করে) তাই আপনি return falseপরে যুক্ত করতেও চাইবেন map = [], সুতরাং আপনার সাইটের ব্যবহারকারীরা হতাশ হবেন না যখন "নকল ফাইল" ফাংশন, রাখা হচ্ছে CtrlD, পরিবর্তে পৃষ্ঠা বুকমার্ক।

if(map[17] && map[68]){ // CTRL+D
    alert('The bookmark window didn\'t pop up!');
    map = {};
    return false;
}

ছাড়া return false, বুকমার্ক উইন্ডোতে হবে পপ আপ, ব্যবহারকারী একটি বড় আতঙ্কের।

ফেরতের বিবৃতি (নতুন)

ঠিক আছে, সুতরাং আপনি সবসময় এই সময়ে ফাংশন থেকে প্রস্থান করতে চান না। কেন এটা event.preventDefault()ফাংশন আছে। এটি যা করে তা একটি অভ্যন্তরীণ পতাকা সেট করে যা দোভাষীকে ব্রাউজারটিকে তার ডিফল্ট ক্রিয়াকলাপটি চালানোর অনুমতি না দেয়। এর পরে, ফাংশনটির সম্পাদন অব্যাহত থাকে (যেখানে returnতত্ক্ষণাত ফাংশনটি প্রস্থান করা হবে)।

এই পার্থক্য বুঝুন আগে আপনি কিনা তা স্থির ব্যবহার করতে return falseবাe.preventDefault()

event.keyCode অবচয় করা হয়

ব্যবহারকারী শানভিয়ারা হ'ল মন্তব্যগুলিতে উল্লেখ করেছেন যে অবহেলাevent.keyCode করা হয়েছে।

আছে: তিনি একটি চমৎকার বিকল্প দিলেন event.key, যা চাবি একটি স্ট্রিং উপস্থাপনা ফেরৎ টেপা হচ্ছে, মত "a"জন্য A, অথবা "Shift"জন্য Shift

আমি এগিয়ে গিয়ে বললাম স্ট্রিং পরীক্ষা করার জন্য একটি সরঞ্জাম রান্না করেছি ।

element.onevent বনাম element.addEventListener

যার সাথে নিবন্ধিত হ্যান্ডলারগুলি addEventListenerস্ট্যাক করা যেতে পারে এবং নিবন্ধের ক্রমে ডাকা হয়, .oneventসরাসরি সেট করা বরং আক্রমণাত্মক এবং আপনার পূর্বে যা কিছু ছিল সেগুলি ওভাররাইড করে।

document.body.onkeydown = function(ev){
    // do some stuff
    ev.preventDefault(); // cancels default actions
    return false; // cancels this function as well as default actions
}

document.body.addEventListener("keydown", function(ev){
    // do some stuff
    ev.preventDefault() // cancels default actions
    return false; // cancels this function only
});

.oneventসম্পত্তি সবকিছু এবং আচরণকে ওভাররাইড বলে মনে হয় ev.preventDefault()এবং return false;বদলে অনিশ্চিত হতে পারে।

উভয় ক্ষেত্রেই, মাধ্যমে নিবন্ধিত হ্যান্ডলারগুলি addEventlistenerলেখার পক্ষে আরও সহজ এবং যুক্তিযুক্ত বলে মনে হয়।

এছাড়াও রয়েছে attachEvent("onevent", callback)ইন্টারনেট এক্সপ্লোরার এর অ-মানক বাস্তবায়ন থেকে, কিন্তু এই অবচিত পরলোক হল এবং এমনকি জাভাস্ক্রিপ্ট (এটা নামক একটি গূঢ় ভাষা সংক্রান্ত অধিকারে থাকা না JScript )। পলিগ্লট কোড যতটা সম্ভব এড়ানো আপনার পক্ষে ভাল।

একটি সহায়ক শ্রেণি

বিভ্রান্তি / অভিযোগের সমাধানের জন্য, আমি একটি "শ্রেণি" লিখেছি যা এই বিমূর্ততা ( পেস্টবিন লিঙ্ক ) করে:

function Input(el){
    var parent = el,
        map = {},
        intervals = {};
    
    function ev_kdown(ev)
    {
        map[ev.key] = true;
        ev.preventDefault();
        return;
    }
    
    function ev_kup(ev)
    {
        map[ev.key] = false;
        ev.preventDefault();
        return;
    }
    
    function key_down(key)
    {
        return map[key];
    }

    function keys_down_array(array)
    {
        for(var i = 0; i < array.length; i++)
            if(!key_down(array[i]))
                return false;

        return true;
    }
    
    function keys_down_arguments()
    {
        return keys_down_array(Array.from(arguments));
    }
    
    function clear()
    {
        map = {};
    }
    
    function watch_loop(keylist, callback)
    {
        return function(){
            if(keys_down_array(keylist))
                callback();
        }
    }

    function watch(name, callback)
    {
        var keylist = Array.from(arguments).splice(2);

        intervals[name] = setInterval(watch_loop(keylist, callback), 1000/24);
    }

    function unwatch(name)
    {
        clearInterval(intervals[name]);
        delete intervals[name];
    }

    function detach()
    {
        parent.removeEventListener("keydown", ev_kdown);
        parent.removeEventListener("keyup", ev_kup);
    }
    
    function attach()
    {
        parent.addEventListener("keydown", ev_kdown);
        parent.addEventListener("keyup", ev_kup);
    }
    
    function Input()
    {
        attach();

        return {
            key_down: key_down,
            keys_down: keys_down_arguments,
            watch: watch,
            unwatch: unwatch,
            clear: clear,
            detach: detach
        };
    }
    
    return Input();
}

এই শ্রেণিটি সবকিছু করে না এবং এটি প্রতিটি অনুমেয় ব্যবহারের কেস পরিচালনা করবে না। আমি লাইব্রেরির লোক নই তবে সাধারণ ইন্টারেক্টিভ ব্যবহারের জন্য এটি ঠিক থাকতে হবে।

এই শ্রেণিটি ব্যবহার করার জন্য, একটি উদাহরণ তৈরি করুন এবং কীবোর্ড ইনপুটটির সাথে সংযুক্ত করতে চান এমন উপাদানটিতে এটি নির্দেশ করুন:

var input_txt = Input(document.getElementById("txt"));

input_txt.watch("print_5", function(){
    txt.value += "FIVE ";
}, "Control", "5");

এটি যা করবে তা হ'ল উপাদানটির সাথে একটি নতুন ইনপুট শ্রোতা সংযুক্ত করা #txt(আসুন ধরে নেওয়া যাক এটি একটি টেক্সেরিয়া আছে), এবং কী কম্বোয়ের জন্য একটি ওয়াচপয়েন্ট সেট করুন Ctrl+5। যখন উভয় Ctrlএবং 5নিচে হয়, কলব্যাক ফাংশন আপনি পাস (এই ক্ষেত্রে, একটি ফাংশন যে যোগ করে "FIVE "পাঠ্য এলাকা পর্যন্ত) বলা হবে। কলব্যাক নামের সাথে জড়িত print_5, তাই এটি সরাতে আপনি সহজভাবে ব্যবহার করুন:

input_txt.unwatch("print_5");

উপাদান input_txtথেকে বিচ্ছিন্ন করতে txt:

input_txt.detach();

এই উপায়ে, আবর্জনা সংগ্রহটি বস্তুটি ( input_txt) তুলতে পারে, এটি ফেলে দেওয়া উচিত, এবং আপনার কোনও পুরানো জম্বি ইভেন্ট শ্রোতা বাকি থাকবে না।

পুঙ্খানুপুঙ্খতার জন্য, সি / জাভা শৈলীতে উপস্থাপিত শ্রেণীর API এর একটি দ্রুত রেফারেন্স দেওয়া হয়েছে যাতে তারা কীভাবে ফিরে আসে এবং কী যুক্তিগুলি প্রত্যাশা করে তা আপনি জানেন।

Boolean  key_down (String key);

নিচে trueথাকলে ফিরে keyআসে, অন্যথায় মিথ্যা।

Boolean  keys_down (String key1, String key2, ...);

trueসমস্ত কীগুলি key1 .. keyNনিচে থাকলে ফিরে আসে, অন্যথায় মিথ্যা।

void     watch (String name, Function callback, String key1, String key2, ...);

এমন একটি "ওয়াচপয়েন্ট" তৈরি করে যা সমস্ত কিছু টিপলে কলব্যাকটি keyNট্রিগার হয়ে যায়

void     unwatch (String name);

এর নাম দিয়ে ওয়াচপয়েন্টটি সরানো হয়েছে

void     clear (void);

"কীগুলি নীচে" ক্যাশে মুছুন। map = {}উপরের সমতুল্য

void     detach (void);

Detaches ev_kdownএবং ev_kupপিতা বা মাতা উপাদান থেকে শ্রোতারা, এটা সম্ভব উপার্জন নিরাপদে উদাহরণস্বরূপ পরিত্রাণ পেতে

আপডেট 2017-12-02 GitHub এই প্রকাশ করতে একটি অনুরোধ জবাবে, আমি একটি তৈরি করেছেন সারকথা

2018-07-21 আপডেট করুন আমি কিছুক্ষণের জন্য ডিক্লেটারিটিভ স্টাইল প্রোগ্রামিং নিয়ে খেলছি, এবং এই উপায়টি এখন আমার ব্যক্তিগত প্রিয়: ফিডল , পেস্টবিন

সাধারণত, আপনি যেসব ক্ষেত্রে বাস্তবসম্মতভাবে চাইবেন (সিটিআরএল, এলইটি, শিফট) এটি কাজ করবে তবে আপনি যদি a+wএকই সাথে আঘাত করতে চান তবে বলুন, একই সাথে এই পদ্ধতির "একত্রিত" করা খুব কঠিন হবে না বহু-কী-অনুসন্ধান।


আমি আশা করি এটির পুরো ব্যাখ্যা করা মিনি ব্লগটি সহায়ক ছিল :)


আমি এই উত্তরে সবেমাত্র একটি বড় আপডেট করেছি! কীলগার উদাহরণটি আরও সুসংগত, আমি ফর্ম্যাটিংটি আপডেট করেছি যাতে "নোটগুলি" বিভাগটি পড়া আরও সহজ হয়ে যায় এবং আমি return falseবনামpreventDefault()
ব্র্যাডেন বেস্ট

যখন আপনি ফোকাসে দস্তাবেজ সহ একটি কী টিপুন / ধরে রাখবেন তখন কী হবে, তারপরে আপনি ইউআরএল বাক্সটি ক্লিক করেন, তারপরে আপনি কীটি ছেড়ে দিতে পারেন। কীআপটি কখনই বরখাস্ত হয় না, তবুও কীটি আপ থাকে, যার ফলে তালিকাটি ভুল হয়। তদ্বিপরীত: কী টিপুন / ইউআরএল বাক্সে ধরে রাখুন, কীডাউন কখনও বরখাস্ত হয় না, তারপরে নথিতে ফোকাস দিন এবং কীডাউন স্ট্যাটাস তালিকায় নেই। মূলত যখনই দস্তাবেজ ফোকাস ফিরে পায় আপনি কখনই মূল স্থিতির বিষয়ে নিশ্চিত হতে পারবেন না।
ব্যবহারকারী 3015682

3
এনবি: keyCodeঅবচিত হ'ল - আপনি যদি স্যুইচ করেন keyতবে আপনি কীটির প্রকৃত চরিত্র উপস্থাপনা পাবেন যা দুর্দান্ত হতে পারে।
শান ভিয়েরা

1
@ সানভিয়েরা আবার, আপনি সি তেও কিছু অদ্ভুত জিনিস করতে পারেন do উদাহরণস্বরূপ, আপনি কি জানেন যে myString[5]এটি একই 5[myString], এবং এটি আপনাকে একটি সংকলন সতর্কতা (এমনকি সহ -Wall -pedantic) দেবে না? ইহার কারণ pointer[offset]স্বরলিপি পয়েন্টার লাগে, যোগ করে অফসেট, এবং তারপর ফলাফলের dereferences, উপার্জন myString[5]হিসাবে একই *(myString + 5)
ব্র্যাডেন সেরা

1
@ ইনরগানিক আপনি কি সহায়ক শ্রেণীর কথা উল্লেখ করছেন? গিস্টগুলি কি রেপসের মতো ব্যবহার করা যেতে পারে? কোডের ক্ষুদ্র স্নিপেটের জন্য পুরো রেপো তৈরি করা ক্লান্তিকর হবে। অবশ্যই, আমি একটি টুকরো করব। আমি আজ রাতে শুটিং করব। মধ্যরাতের পর্বত সময়-ইশ
ব্র্যাডেন সেরা

30

আপনি ব্যবহার করা উচিত keydown কি টেপা ট্র্যাক রাখতে ইভেন্ট, এবং আপনি ব্যবহার করা উচিত keyup যখন চাবি মুক্তি পাচ্ছে ট্র্যাক রাখতে ইভেন্ট।

এই উদাহরণটি দেখুন: http://jsfiddle.net/vor0nwe/mkHsU/

(আপডেট: আমি এখানে কোড পুনরায় উত্পাদন করছি, jsfiddle.net বিলে ক্ষেত্রে :) এইচটিএমএল:

<ul id="log">
    <li>List of keys:</li>
</ul>

... এবং জাভাস্ক্রিপ্ট (jQuery ব্যবহার করে):

var log = $('#log')[0],
    pressedKeys = [];

$(document.body).keydown(function (evt) {
    var li = pressedKeys[evt.keyCode];
    if (!li) {
        li = log.appendChild(document.createElement('li'));
        pressedKeys[evt.keyCode] = li;
    }
    $(li).text('Down: ' + evt.keyCode);
    $(li).removeClass('key-up');
});

$(document.body).keyup(function (evt) {
    var li = pressedKeys[evt.keyCode];
    if (!li) {
       li = log.appendChild(document.createElement('li'));
    }
    $(li).text('Up: ' + evt.keyCode);
    $(li).addClass('key-up');
});

উদাহরণস্বরূপ, আমি কোন কী টিপে চাপছে তা ট্র্যাক রাখতে একটি অ্যারে ব্যবহার করছি। একটি সত্যিকারের অ্যাপ্লিকেশনটিতে, আপনি deleteএকবারে যুক্ত কীটি প্রকাশিত হওয়ার পরে প্রতিটি উপাদানকে চাইবেন ।

মনে রাখবেন যে আমি উদাহরণটিতে নিজের জন্য জিনিসগুলি সহজ করার জন্য jQuery ব্যবহার করেছি, তবে 'কাঁচা' জাভাস্ক্রিপ্টে কাজ করার সময় ধারণাটি ঠিক তেমনি কাজ করে।


তবে আমি ভেবেছি একটি বাগ আছে। আপনি যদি একটি বোতাম টিপে রাখেন তবে অন্য স্ক্রিনে স্যুইচ করুন (বা আলগা ফোকাস) আপনি যখন স্ক্রিপ্টে পুনরায় ফোকাস করবেন তখন বোতামটি ধরে রাখলে এটি প্রদর্শিত হবে যে এটি বোতামটি না থাকলেও টিপে আছে। : ডি
এক্সসিএস 13

3
@ ক্রিস্টি: তারপরে আপনি একটি onblurইভেন্ট হ্যান্ডলার যুক্ত করতে পারেন , যা অ্যারে থেকে সমস্ত চাপানো কীগুলি সরিয়ে দেয়। একবার আপনি ফোকাসটি হারিয়ে ফেললে, সমস্ত কীগুলি আবার চাপতে হবে তা বোধগম্য হবে। দুর্ভাগ্যক্রমে, এর তুলনায় কোনও জেএস নেই GetKeyboardState
মার্টিজন

1
ম্যাক (ক্রোম) এ পেস্ট করতে সমস্যা হচ্ছে। এটি সফলভাবে কীডাউন 91 (কমান্ড), কীডাউন 86 (ভি) পেয়েছে, তবে কেবল 91 টিতে কীপস করে 86 leaving কীগুলির তালিকা: আপ: 91, ডাউন: 86. কমান্ড কীটি দ্বিতীয়বার রেখে দেওয়ার পরে কেবল এটি ঘটবে বলে মনে হয় - যদি আমি প্রথমে এটি ছেড়ে দিই তবে এটি উভয়টিতে কীপটি সঠিকভাবে নিবন্ধভুক্ত করা হবে।
জেমস অ্যালডে

2
এটি প্রদর্শিত হয় যখন আপনি একবারে তিন বা ততোধিক কী টিপুন, আপনি কোনও উপরে না ফেলা পর্যন্ত এটি আর কোনও কী সনাক্তকরণ বন্ধ করে দেয়। (ফায়ারফক্স 22 এর সাথে পরীক্ষিত)
Qvcool

1
@ জামেসএলডে একই সমস্যা এটি দৃশ্যত কেবল ম্যাক্সের মেটা (ওএস) কীকে প্রভাবিত করে। সংখ্যা # 3 এখানে দেখুন: বিটসপিউশারাউন্ড.com/…
ডন


7

আমি এইভাবে ব্যবহার করেছি (শিফট + সিআরটিএল যেদিকেই চাপছে তা পরীক্ষা করে দেখতে হয়েছিল):

// create some object to save all pressed keys
var keys = {
    shift: false,
    ctrl: false
};

$(document.body).keydown(function(event) {
// save status of the button 'pressed' == 'true'
    if (event.keyCode == 16) {
        keys["shift"] = true;
    } else if (event.keyCode == 17) {
        keys["ctrl"] = true;
    }
    if (keys["shift"] && keys["ctrl"]) {
        $("#convert").trigger("click"); // or do anything else
    }
});

$(document.body).keyup(function(event) {
    // reset status of the button 'released' == 'false'
    if (event.keyCode == 16) {
        keys["shift"] = false;
    } else if (event.keyCode == 17) {
        keys["ctrl"] = false;
    }
});

5

যার জন্য সম্পূর্ণ উদাহরণ কোড প্রয়োজন। ডান + বাম যুক্ত

var keyPressed = {};
document.addEventListener('keydown', function(e) {

   keyPressed[e.key + e.location] = true;

    if(keyPressed.Shift1 == true && keyPressed.Control1 == true){
        // Left shift+CONTROL pressed!
        keyPressed = {}; // reset key map
    }
    if(keyPressed.Shift2 == true && keyPressed.Control2 == true){
        // Right shift+CONTROL pressed!
        keyPressed = {};
    }

}, false);

document.addEventListener('keyup', function(e) {
   keyPressed[e.key + e.location] = false;

   keyPressed = {};
}, false);

3

কীডাউনটিকে এমনকি একাধিক ফাংশনকে কল করুন, প্রতিটি ফাংশন একটি নির্দিষ্ট কীটির জন্য পরীক্ষা করে এবং যথাযথভাবে প্রতিক্রিয়া জানান।

document.keydown = function (key) {

    checkKey("x");
    checkKey("y");
};

2

আমি একটি keypress Eventহ্যান্ডলার যুক্ত করার চেষ্টা করব keydown। উদাহরণ:

window.onkeydown = function() {
    // evaluate key and call respective handler
    window.onkeypress = function() {
       // evaluate key and call respective handler
    }
}

window.onkeyup = function() {
    window.onkeypress = void(0) ;
}

এটি কেবল একটি নিদর্শন চিত্রিত করতে বোঝানো হয়েছে; আমি এখানে বিশদে যাব না (বিশেষত ব্রাউজার নির্দিষ্ট স্তর 2 + Eventনিবন্ধকরণে নয়)।

এটি সাহায্য করে কি না দয়া করে পোস্ট করুন।


1
এই কাজটি তাতে রাজী হল না কীপ্রেস যে keydown কি অনেক না ট্রিগার করে এবং keyup না ট্রিগার। এছাড়াও, সমস্ত ব্রাউজারগুলি বারবার কীডাউন ইভেন্টগুলি ট্রিগার করে না।
মার্টিজন

Quirksmode আপনার ভুল বলেছেন: quirksmode.org/dom/events/keys.html । তবে আমি তর্ক করব না যেহেতু আমি আমার প্রস্তাবটি পরীক্ষা করি নি।
এফ কে 82

এই পৃষ্ঠাটি থেকে উদ্ধৃত: "যখন ব্যবহারকারী তীর কীগুলির মতো বিশেষ কীগুলি টিপায় তখন ব্রাউজারটি কী-পিস ইভেন্টগুলিতে গুলি চালানো উচিত নয়" । পুনরাবৃত্তি হিসাবে, এটি অপেরা এবং কনকরারকে সঠিকভাবে না করার জন্য তালিকাবদ্ধ করে।
মার্টিজন

2

কীগুলির মধ্যে একটিতে চাপলে যদি Alt / Crtl / Shift হয় তবে আপনি এই পদ্ধতিটি ব্যবহার করতে পারেন:

document.body.addEventListener('keydown', keysDown(actions) );

function actions() {
   // do stuff here
}

// simultaneous pressing Alt + R
function keysDown (cb) {
  return function (zEvent) {
    if (zEvent.altKey &&  zEvent.code === "KeyR" ) {
      return cb()
    }
  }
}

2
    $(document).ready(function () {
        // using ascii 17 for ctrl, 18 for alt and 83 for "S"
        // ctr+alt+S
        var map = { 17: false, 18: false, 83: false };
        $(document).keyup(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = true;
                if (map[17] && map[18] && map[83]) {
                    // Write your own code here, what  you want to do
                    map[17] = false;
                    map[18] = false;
                    map[83] = false;
                }
            }
            else {
                // if u press any other key apart from that "map" will reset.
                map[17] = false;
                map[18] = false;
                map[83] = false;
            }
        });

    });

আপনার অবদানের জন্য ধন্যবাদ। দয়া করে কেবল কোড পোস্ট না করার চেষ্টা করুন, কিছু ব্যাখ্যা যুক্ত করুন।
টিম রুটার

2

এটি কোনও সর্বজনীন পদ্ধতি নয়, তবে এটি কিছু ক্ষেত্রে কার্যকর। এটি CTRL+ somethingবা Shift+ somethingবা CTRL+ Shift+ somethingইত্যাদির মতো সংমিশ্রনের জন্য দরকারী

উদাহরণ: আপনি CTRL+ ব্যবহার করে কোনও পৃষ্ঠা মুদ্রণ করতে চাইলে P, প্রথমে কী টিপে সর্বদা CTRLঅনুসরণ করা হয় PCTRL+ S, CTRL+ Uএবং অন্যান্য সংমিশ্রণের সাথে একই ।

document.addEventListener('keydown',function(e){
      
    //SHIFT + something
    if(e.shiftKey){
        switch(e.code){

            case 'KeyS':
                console.log('Shift + S');
                break;

        }
    }

    //CTRL + SHIFT + something
    if(e.ctrlKey && e.shiftKey){
        switch(e.code){

            case 'KeyS':
                console.log('CTRL + Shift + S');
                break;

        }
    }

});


1
case 65: //A
jp = 1;
setTimeout("jp = 0;", 100);

if(pj > 0) {
ABFunction();
pj = 0;
}
break;

case 66: //B
pj = 1;
setTimeout("pj = 0;", 100);

if(jp > 0) {
ABFunction();
jp = 0;
}
break;

সবচেয়ে ভাল উপায় নয়, আমি জানি।


-1
Easiest, and most Effective Method

//check key press
    function loop(){
        //>>key<< can be any string representing a letter eg: "a", "b", "ctrl",
        if(map[*key*]==true){
         //do something
        }
        //multiple keys
        if(map["x"]==true&&map["ctrl"]==true){
         console.log("x, and ctrl are being held down together")
        }
    }

//>>>variable which will hold all key information<<
    var map={}

//Key Event Listeners
    window.addEventListener("keydown", btnd, true);
    window.addEventListener("keyup", btnu, true);

    //Handle button down
      function btnd(e) {
      map[e.key] = true;
      }

    //Handle Button up
      function btnu(e) {
      map[e.key] = false;
      }

//>>>If you want to see the state of every Key on the Keybaord<<<
    setInterval(() => {
                for (var x in map) {
                    log += "|" + x + "=" + map[x];
                }
                console.log(log);
                log = "";
            }, 300);
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.