জেএস / জিকুয়েরিতে বাঁধার তীর কীগুলি


418

জাভাস্ক্রিপ্ট এবং / অথবা jQuery এর বাম এবং ডান তীর কীগুলিতে কোনও ফাংশনকে বাঁধাই করতে আমি কীভাবে যেতে পারি? আমি jQuery এর জন্য js-hotkey প্লাগইনটি দেখেছি (নির্দিষ্ট কীগুলি সনাক্ত করার জন্য যুক্তি যুক্ত করার জন্য বিল্ট-ইন বাইন্ড ফাংশনটি গুটিয়ে রাখে) তবে এটি তীর কীগুলি সমর্থন করে বলে মনে হয় না।


উত্তর:


541
document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};

আপনার যদি আইই 8 সমর্থন করতে হয় তবে ফাংশন বডি হিসাবে শুরু করুন e = e || window.event; switch(e.which || e.keyCode) {


(2020 সম্পাদনা করুন)
নোট যেটি KeyboardEvent.whichএখন হ্রাস করা হয়েছে। তীর কীগুলি সনাক্ত করতে আরও আধুনিক সমাধানের জন্য ব্যবহার করে এই উদাহরণটিKeyboardEvent.key দেখুন ।


28
অনেক ভাল উত্তর দ্বারা। e.whichJQuery এর মতো ব্যবহার ক্রস ব্রাউজারের জন্য প্রস্তাব দেয়, e.preventDefault()পরিবর্তে ব্যবহার করে return false( return falsejQuery ইভেন্ট হ্যান্ডলার উভয়কেই ট্রিগার করে e.preventDefault()এবং এর e.stopPropagation()মধ্যে দ্বিতীয়টি পরে সংযুক্ত ইভেন্টগুলিকে ব্যর্থ করে দেয় কারণ ইভেন্টটি তাদের প্রচার না করে) এবং সুইচ শেষে, ফিরে আসবে ছাড়া কলিং e.preventDefault()যদি এটা বেশী পিছনের অন্যান্য না কী ব্যবহার করার জন্য লাগছিল হচ্ছে ছাড়া অন্য কী, এবং পরিবর্তে $.ui.keyCode.DOWNএটা (অনেক দ্রুত) নম্বরে তুলনা করা হয়।
জিম্বো জনি

2
নাথন: মনে হচ্ছে যে সমস্ত কীকডগুলি ব্রাউজারগুলির মধ্যে সামঞ্জস্যপূর্ণ নয়, তবে তীর কীগুলি এমন কিছু। : এখানে দেখুন stackoverflow.com/questions/5603195/...
Sygmoral

1
@ মিশেলশেপার - ১) ভেরিয়েবল! = ধ্রুবক, তারা পরিবর্তিত হওয়ার উদ্দেশ্যে কিনা তা নির্বিশেষে ... ইঞ্জিনটি এখনও ES6 কনস্ট্যান্টগুলি সর্বব্যাপী না হওয়া পর্যন্ত তাদেরকে বার্সের মতো আচরণ করবে 2) সংখ্যাগুলি নয় সত্যই ম্যাজিক সংখ্যাগুলি যখন তাদের ঠিক ঠিক কী তা বলার পাশে পাশে মন্তব্য থাকে এবং 3) ... চালিয়ে যান
জিম্বো জনি

2
... 3) যখন অ্যাক্সেস $.ui.keyCode.DOWNআপনার জন্য চেহারা $আপনার আভিধানিক সুযোগ, এটা খোঁজার একটি স্তর ঊর্ধ্বগামী ... খুঁজছেন না $বিশ্বব্যাপী সুযোগ পর্যন্ত পুনরাবৃত্তি, বিশ্বব্যাপী থেকে তা খুঁজে পেতে window, অ্যাক্সেস $উইন্ডোতে, অ্যাক্সেস uiউপর window.$, অ্যাক্সেস keyCodeউপর window.$.ui, অ্যাক্সেস DOWNউপর window.$.ui.keyCodeআদিম মান তোমার তুলনা করতে চান পেতে, তারপর আপনার প্রকৃত তুলনা না। আপনার কাছে সেই গতির বিষয়টি ব্যক্তিগত সিদ্ধান্ত হোক বা না হোক, আমি যখন কেবল তখনই আদিম লিখতে / মন্তব্য করতে পারি তখন এমন কোনও পরিস্থিতি হয় যখন আমার 4 মাত্রার অ্যাক্সেস এড়িয়ে যাওয়ার প্রবণতা থাকে।
জিম্বো জনি

1
@ নাথান আর্থার এখানে আমি কীবোর্ড কীকোডগুলি পরীক্ষা করার জন্য দুটি ভাল অনলাইন সরঞ্জাম পেয়েছি: keycode.info asquare.net/javascript/tests/KeyCode.html unixpapa.com/js/key.html
রিকার্ডো ভলপ

451
$(document).keydown(function(e){
    if (e.which == 37) { 
       alert("left pressed");
       return false;
    }
});

চরিত্রের কোডগুলি:

37 - বাম

38 - আপ

39 - ডান

40 - নিচে


4
ফেরার কোনও উদ্দেশ্য আছে কি?
অ্যালেক্স এস

19
এটি কীডাউন ইভেন্টগুলি হিট হওয়ার পরে থামায়।
s_heitt

9
ছায়া: না, তার অর্থ কীডাউন ইভেন্টটি অন্যান্য
ডিওএম

3
39 বাদেও এস্ট্রোফের, তাই না?
পল ডি ওয়েট

25
JQuery ব্যবহার e.whichকরার সময় e.keyCode, আরও ব্রাউজার সমর্থনের চেয়ে ব্যবহার করুন। নীচে আমার মন্তব্য দেখুন।
সিগমোরাল

108

আপনি তীর কীগুলির কোড কোড (37, 38, 39 এবং 40 বাম, উপরে, ডান এবং নীচে) ব্যবহার করতে পারেন:

$('.selector').keydown(function (e) {
  var arrow = { left: 37, up: 38, right: 39, down: 40 };

  switch (e.which) {
    case arrow.left:
      //..
      break;
    case arrow.up:
      //..
      break;
    case arrow.right:
      //..
      break;
    case arrow.down:
      //..
      break;
  }
});

উপরের উদাহরণটি এখানে দেখুন


1
আমি আপনার ব্যবহার সম্পর্কে নিশ্চিত নই || অপারেটার লাইনে ২। শূন্য বা ননজারো বাস্তবায়ন নির্দিষ্ট এবং গ্যারান্টিযুক্ত ছাড়া অন্য কোনও মান নয় কি? আমি আরও কিছু ব্যবহার করব: var কী কোড = (e.keyCode? E.keyCode: e. which); মামলাগুলি পঠনযোগ্য নাম দেওয়ার জন্য তীর বস্তুর ব্যবহারের জন্য +1 1
মেনবুয়েরকো

6
আপনি যদি jQuery ব্যবহার করে থাকেন তবে আপনার e.Wich: The event.which property normalizes event.keyCode and event.charCode- api.jquery.com/event.which
JCM

আমি একটি মূল ইভেন্ট শ্রোতাদের একটি টেবিলে রাখার চেষ্টা করছি, তবে এটি কার্যকর হবে না। কী ইভেন্টের শ্রোতাদের সমর্থন করে এমন কি সীমিত সংখ্যক নির্বাচক প্রকার রয়েছে?
আরমান বিমাটোভ

23

এটি কিছুটা দেরীতে, তবে হটকিসের একটি খুব বড় বাগ রয়েছে যা যদি আপনি একটি উপাদানের সাথে একাধিক হটকি সংযুক্ত করেন তবে ঘটনাগুলি একাধিকবার সম্পাদিত হতে পারে। কেবল প্লেইন jQuery ব্যবহার করুন।

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});

2
Ui কীকোড অবজেক্টটি ব্যবহারের জন্য +1। 37, 38, 39, বা 40 এর চেয়ে অনেক বেশি বোঝা sure জিকারি ডকুমেন্টেশন যখন স্পষ্টভাবে ব্রাউজারের পার্থক্যের জন্য অ্যাকাউন্টে e.With ব্যবহার করতে বলেছিল তখন শীর্ষ উত্তর কেন ekeykey ব্যবহার করছে তা নিশ্চিত নয়। আশা করি এই উত্তরটি এটি সঠিকভাবে করার জন্য আরও স্বীকৃতি পেয়েছে।
কোনটি

2
প্রতিটি কী প্রেসে $ .ui.keyCode.DOWN ব্যবহার করা সংখ্যাটি ব্যবহারের চেয়ে অনেক ধীর। স্পষ্টতা সম্পর্কে উদ্বিগ্ন হলে কেবল একটি মন্তব্য যুক্ত করুন, বিশেষত যেহেতু এটি প্রতিবার কোনও কী চাপলে চালানো হয়।
জিম্বো জনি

16

আমি অন্য উত্তরগুলি থেকে সেরা বিটগুলি একত্রিত করেছি:

$(document).keydown(function(e){
    switch(e.which) {
        case $.ui.keyCode.LEFT:
        // your code here
        break;

        case $.ui.keyCode.UP:
        // your code here
        break;

        case $.ui.keyCode.RIGHT:
        // your code here
        break;

        case $.ui.keyCode.DOWN:
        // your code here
        break;

        default: return; // allow other keys to be handled
    }

    // prevent default action (eg. page moving up/down)
    // but consider accessibility (eg. user may want to use keys to choose a radio button)
    e.preventDefault();
});

1
"ইউআই" কোথা থেকে আসছে? "TypeError: ui .ui অপরিবর্তিত" EDIT পাওয়া - আমি JQuery UI অনুপস্থিত ছিল। বোঝা গেল যে - আর ত্রুটি নেই।
একটি কোডার

3
তিনি দৃশ্যত jQuery ইউআইও ব্যবহার করছেন যা অবশ্যই এনাম থাকা উচিত। আমি কেবল তার জন্য jQuery UI অন্তর্ভুক্ত করব না, বিটিডব্লিউ।
জেথ্রো লারসন

14

আপনি কিবোর্ডজেএস ব্যবহার করতে পারেন। আমি ঠিক এইভাবে কাজের জন্য লাইব্রেরি লিখেছি।

KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });

এখানে লাইব্রেরি চেকআউট করুন => http://robertwhurst.github.com/KeyboardJS/


14

সরল জাভাস্ক্রিপ্ট ব্যবহার করে একটি ক্ষুদ্র সমাধান (প্রস্তাবিত উন্নতির জন্য সিগমোরালকে ধন্যবাদ):

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
    }
};

এছাড়াও https://stackoverflow.com/a/17929007/1397061 দেখুন


সম্ভবত তিনি মাধ্যমে বাঁধাই মূল্যdocument.addEventListener('keydown', myFunction);
nathanbirrell

9

আপনি কি নিশ্চিত যে jQuery.HotKeys তীর কীগুলি সমর্থন করে না? আমি এর আগে তাদের ডেমোটি নিয়ে গণ্ডগোল করেছি এবং আমি যখন আই 7, ফায়ারফক্স ৩.০.২, এবং গুগল ক্রোম ২.০.১ in২ এ পরীক্ষা করেছি তখন বাম, ডান, উপরে এবং নিচে কাজ করেছি observed

সম্পাদনা : এটি প্রদর্শিত হচ্ছে jquery.hotkeys গিথুব এ স্থানান্তরিত হয়েছে: https://github.com/jeresig/jquery.hotkeys


আমি পড়ছিলাম যেখানে এটি বলা হয়েছিল এটি অন্য লাইব্রেরির উপর ভিত্তি করে রয়েছে এবং ধরে নেওয়া হয়েছে যে সমর্থিত কীগুলির তালিকা এখনও প্রয়োগ রয়েছে।
অ্যালেক্স এস

5

return false;উপরের উদাহরণগুলির মতো ব্যবহারের পরিবর্তে আপনি ব্যবহার করতে পারবেন e.preventDefault();যা একই কাজ করে তবে বোঝা এবং পড়া সহজ।


4
return false;এবং e.preventDefault();একেবারে এক নয় not স্ট্যাকওভারফ্লো.com
জোসে রুই সান্তোস

4

ডান বা বামে যেতে শুদ্ধ জেএসের উদাহরণ

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });

3

আপনি jQuery বাইন্ড ব্যবহার করতে পারেন:

$(window).bind('keydown', function(e){
    if (e.keyCode == 37) {
        console.log('left');
    } else if (e.keyCode == 38) {
        console.log('up');
    } else if (e.keyCode == 39) {
        console.log('right');
    } else if (e.keyCode == 40) {
        console.log('down');
    }
});

2

আপনি arrow keyচেপে দেখতে পারেন যে টিউনটি দ্বারা চাপানো হয়েছে:

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) { 
       alert( "arrowkey pressed" );
       return false;
    }
});

0

অন্য যে কোন বস্তুর জন্য কেবল তীর উপলভ্য প্রতিরোধ করুন নির্বাচন করুন, ভাল আসলে আমি অন্য কোনও বস্তুর উপর টেপ নেই LOL। তবে এটি পৃষ্ঠা এবং ইনপুট ধরণের তীর ইভেন্ট বন্ধ করতে পারে।

আমি "ই.প্রিভেন্টডিফল্ট ()" বা "কেপ্রেস" "কীডাউন" এবং "কীআপ" ইভেন্টে "মিথ্যা ফিরতি" ব্যবহার করে SELECT অবজেক্টের মান পরিবর্তন করতে ইতোমধ্যে বাম এবং ডানদিকে অবরোধ করার চেষ্টা করেছি তবে এটি এখনও অবজেক্টের মান পরিবর্তন করে। তবে ইভেন্টটি এখনও আপনাকে বলে যে তীরটি চাপা দেওয়া হয়েছিল।


0

কীবোর্ড ইনপুট এবং কী সংমিশ্রণগুলি ক্যাপচারের জন্য একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি প্রবেশ করেছে। এর কোনও নির্ভরতা নেই।

http://jaywcjlove.github.io/hotkeys/

hotkeys('right,left,up,down', function(e, handler){
    switch(handler.key){
        case "right":console.log('right');break
        case "left":console.log('left');break
        case "up":console.log('up');break
        case "down":console.log('down');break
    }
});

0

আমি এখানে একটি সহজ উপায় সন্ধান করতে এসেছি যখন ব্যবহারকারী কোনও ইনপুটকে কেন্দ্র করে, তীর কীগুলি +1 বা -1 একটি সংখ্যার ইনপুট ব্যবহার করতে দেয় আমি কখনই একটি ভাল উত্তর পাই না তবে নিম্নলিখিত কোডটি তৈরি করে যা দুর্দান্ত বলে মনে হচ্ছে - এখন এই সাইটটিকে প্রশস্ত করে তুলছে।

$("input").bind('keydown', function (e) {
    if(e.keyCode == 40 && $.isNumeric($(this).val()) ) {
        $(this).val(parseFloat($(this).val())-1.0);
    } else if(e.keyCode == 38  && $.isNumeric($(this).val()) ) { 
        $(this).val(parseFloat($(this).val())+1.0);
    }
}); 

-1

কফি এবং জ্যাকারি সহ

  $(document).on 'keydown', (e) ->
    switch e.which
      when 37 then console.log('left key')
      when 38 then console.log('up key')
      when 39 then console.log('right key')
      when 40 then console.log('down key')
    e.preventDefault()
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.