JS / jQuery में तीर कुंजी बांधना

Question

मैं जावास्क्रिप्ट और / या jQuery में बाएँ और दाएँ तीर कुंजी के लिए एक फ़ंक्शन बाइंडिंग के बारे में कैसे जाना है? मैंने jQuery के लिए js-hotkey plugin को देखा (विशिष्ट कुंजियों को पहचानने के लिए एक तर्क जोड़ने के लिए अंतर्निहित बांध फ़ंक्शन को लपेटता है), लेकिन यह तीर कुंजियों का समर्थन नहीं करता है।

Comments

शुद्ध जेएस या jQuery के साथ भागने के प्रमुख प्रेस का पता लगाने के लिए कैसे

— एलेक्स 83690

Answer 1

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)
};

यदि आपको IE8 का समर्थन करने की आवश्यकता है, तो फ़ंक्शन बॉडी को प्रारंभ करें e = e || window.event; switch(e.which || e.keyCode) {।

(संपादित करें 2020)
ध्यान दें कि KeyboardEvent.whichअब पदावनत किया गया है। देखें का उपयोग कर इस उदाहरणKeyboardEvent.key के लिए अत्याधुनिक समाधान के लिए तीर कुंजी का पता लगाने के लिए।

Comments

अब तक का सबसे अच्छा जवाब। e.whichJQuery जैसे उपयोग क्रॉस-ब्राउज़र के लिए अनुशंसा करते हैं, के e.preventDefault()बजाय का उपयोग करता है return false( return falsejQuery इवेंट हैंडलर पर दोनों को ट्रिगर करता है e.preventDefault()और e.stopPropagation(), जिनमें से दूसरा किसी भी बाद में जोड़े जाने वाले ईवेंट को विफल करने जा रहा है क्योंकि ईवेंट उनके लिए प्रचार नहीं करेगा), और स्विच का अंत, बिना कॉल किए बिना वापस आ जाएगा e.preventDefault()यदि यह किसी अन्य कुंजी की तुलना में अन्य महत्वपूर्ण उपयोग में बाधा न बनने के लिए देखा जाए, और इसके बजाय $.ui.keyCode.DOWNयह संख्याओं की तुलना करता है (बहुत तेजी से)।

— जिम्बो जॉनी

नाथन: ऐसा लगता है कि सभी कीकोड ब्राउज़र के बीच सुसंगत नहीं हैं, लेकिन तीर कुंजी उनमें से कुछ हैं। यहां देखें: stackoverflow.com/questions/5603195/…

— Sygmoral

@MichaelScheper - 1) चर! = स्थिरांक, चाहे वे बदले जाने का इरादा हो या न हो ... इंजन को अभी भी उन्हें var की तरह व्यवहार करना है जब तक कि ES6 स्थिरांक सर्वव्यापी पर्याप्त नहीं हैं कि jQuery 2 का उपयोग कर सकते हैं) संख्याएं नहीं हैं वास्तव में जादू नंबर जब उनके ठीक बगल में टिप्पणी होती है कि वे क्या कह रहे हैं, और 3) ... जारी रखा

— जिम्बो जॉनी

... 3) जब तक पहुँचने $.ui.keyCode.DOWNआप के लिए देखने के लिए $अपने शाब्दिक दायरे में, यह खोजने के लिए एक स्तर ऊपर जाने ... की तलाश में नहीं $वैश्विक क्षेत्र में जब तक, दोहराएँ, वैश्विक पर इसे खोजने window, पहुँच $खिड़की पर, पहुँच uiपर window.$, पहुँच keyCodeपर window.$.ui, उपयोग DOWNपर window.$.ui.keyCodeआदिम मूल्य आप तुलना करना चाहते करने के लिए है, तो अपने वास्तविक की तुलना करते हैं। आपके लिए यह गति मायने रखती है या नहीं, यह एक व्यक्तिगत निर्णय है, मेरे पास सिर्फ 4 स्तरों तक पहुँचने से बचने की प्रवृत्ति है, जब ऐसी स्थिति होती है जहाँ मैं आसानी से आदिम लिख / टिप्पणी कर सकता हूँ।

— जॉनी

@NathanArthur यहाँ मुझे कीबोर्ड कीबोर्ड का परीक्षण करने के लिए दो अच्छे ऑनलाइन टूल मिले: keycode.info asquare.net/javascript/tests/KeyCode.html unixpapa.com/js/key.html

— Riccardo Volpe

Answer 2

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

चरित्र कोड:

37 - छोड़ दिया

38 - ऊपर

39 - सही

40 - नीचे

Comments

क्या वापसी का कोई उद्देश्य है?

— एलेक्स एस।

यह किसी भी आगे कीडाउन घटनाओं को हिट होने से रोकता है।

— s_hewitt

छाया: नहीं, वह इसका मतलब है कि यह अन्य डोम तत्वों पर गोलीबारी से

— कीडाउन की

39 को छोड़कर भी एपोस्ट्रोफ है, है ना?

— पॉल डी। वेट

JQuery का उपयोग करते e.whichसमय e.keyCode, अधिक ब्राउज़र समर्थन के बजाय उपयोग करें । मेरी टिप्पणी नीचे देखें।

— सिग्मोरल

Answer 3

आप तीर कुंजी (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;
  }
});

उपरोक्त उदाहरण यहां देखें ।

Comments

मैं आपके उपयोग के बारे में निश्चित नहीं हूँ || लाइन में ऑपरेटर 2. शून्य या नॉनज़रो कार्यान्वयन के अलावा कोई मूल्य विशिष्ट नहीं है और इसकी गारंटी नहीं है? मैं कुछ और उपयोग करूंगा जैसे: var keyCode = (e.keyCode; e.keyCode: e.which); मामलों को पठनीय नाम देने के लिए एरो ऑब्जेक्ट के उपयोग के लिए +1।

— Mnebuerquo

यदि आप jQuery का उपयोग कर रहे हैं, तो आपको e.which के लिए परीक्षण करने की आवश्यकता नहीं है: The event.which property normalizes event.keyCode and event.charCode- api.jquery.com/event.which

— JCM

मैं एक मेज पर एक महत्वपूर्ण ईवेंट श्रोता लगाने की कोशिश कर रहा हूं, लेकिन यह काम नहीं करेगा। क्या चयनकर्ता प्रकार की एक सीमित मात्रा है जो प्रमुख ईवेंट श्रोताओं का समर्थन करती है?

— बजे अरमान बिमातोव

Answer 4

यह थोड़ा देर से होता है, लेकिन HotKeys में एक बहुत बड़ी बग होती है जिसके कारण घटनाओं को कई बार निष्पादित किया जाता है यदि आप एक तत्व से अधिक हॉटकी संलग्न करते हैं। बस सादा jQuery का उपयोग करें।

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

Comments

Ui कीकोड ऑब्जेक्ट का उपयोग करने के लिए +1। 37, 38, 39, या 40 की तुलना में समझने में बहुत आसान है। यकीन नहीं कि क्यों शीर्ष उत्तर e.keyCode का उपयोग कर रहा है जब jQuery प्रलेखन स्पष्ट रूप से ब्राउज़र अंतर के लिए खाते में e.which का उपयोग करने के लिए कहता है। उम्मीद है कि इस उत्तर को सही करने के लिए अधिक मान्यता मिली।

— कोई नहीं

प्रत्येक कुंजी प्रेस पर $ .ui.keyCode.DOWN का उपयोग करके संख्या का उपयोग करने की तुलना में बहुत धीमी है। यदि स्पष्टता के बारे में चिंतित हैं तो केवल एक टिप्पणी जोड़ें, खासकर जब से हर बार किसी भी कुंजी को दबाया जाना हो।

— जिम्बो जॉनी

Answer 5

मैंने अन्य उत्तरों में से सबसे अच्छे बिट्स को संयुक्त किया है:

$(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();
});

Comments

"उई" कहाँ से आ रहा है? "TypeError: $ .ui अपरिभाषित है" EDIT प्राप्त करना - मुझे JQuery UI याद आ रहा था। लोड हो गया - कोई और त्रुटि नहीं।

— एक कोडर

वह जाहिरा तौर पर jQuery UI का उपयोग कर रहा है, जिसमें वह एनम होना चाहिए। मैं उसके लिए jQuery UI शामिल नहीं करूँगा, btw।

— जेथ्रो लार्सन

Answer 6

आप KeyboardJS का उपयोग कर सकते हैं। मैंने इस तरह से कार्यों के लिए पुस्तकालय लिखा है।

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/

Answer 7

सादे जावास्क्रिप्ट का उपयोग करके एक हल समाधान (सुझाए गए सुधारों के लिए सिगमोरल का धन्यवाद):

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

इसके अलावा https://stackoverflow.com/a/17929007/1397061 देखें ।

Comments

शायद यह भी माध्यम से बाध्यकारी लायकdocument.addEventListener('keydown', myFunction);

— nathanbirrell

Answer 8

क्या आपको यकीन है कि jQuery.HotKeys तीर कुंजी का समर्थन नहीं करता है? जब मैंने IE7, फ़ायरफ़ॉक्स 3.5.2, और Google Chrome 2.0.172 में इसका परीक्षण किया है, तो मैंने पहले उनके डेमो के साथ खिलवाड़ किया और बाएँ, दाएँ, ऊपर और नीचे काम किया।

संपादित करें : ऐसा प्रतीत होता है कि jquery.hotkeys को Github में स्थानांतरित कर दिया गया है: https://github.com/jeresig/jquery.hotkeys

Comments

मैं पढ़ रहा था जहां यह कहा गया था कि यह एक अन्य पुस्तकालय पर आधारित था, और यह मान लिया कि समर्थित कुंजी की सूची अभी भी लागू है।

— एलेक्स एस।

Answer 9

return false;ऊपर दिए गए उदाहरणों के अनुसार उपयोग करने के बजाय , आप इसका उपयोग कर सकते हैं e.preventDefault();जो समान है लेकिन समझने और पढ़ने में आसान है।

Comments

return false;और e.preventDefault();वास्तव में समान नहीं हैं। देखें stackoverflow.com/a/1357151/607874

— जोस रुई सैंटोस

Answer 10

दाएं या बाएं जाने के साथ शुद्ध जेएस का उदाहरण

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

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

            }
        });

Answer 11

आप 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');
    }
});

Answer 12

आप देख सकते हैं कि वेदर किसके arrow keyद्वारा दबाया गया है:

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

Answer 13

केवल किसी अन्य वस्तु के लिए उपलब्ध तीर को चुनें सेलेक्ट करें, वास्तव में मैं किसी अन्य ऑब्जेक्ट LOL पर tes नहीं हूं। लेकिन यह पेज और इनपुट प्रकार पर तीर घटना को रोक सकता है।

मैं पहले से ही "e.preventDefault ()" या "झूठी" का उपयोग करके "kepress" "कीडाउन" और "कीअप" इवेंट पर "सही" रिटर्न का उपयोग करके ऑब्जेक्ट को बदलने के लिए बाएं और दाएं तीर को ब्लॉक करने का प्रयास करता हूं लेकिन फिर भी यह ऑब्जेक्ट वैल्यू को बदल देता है। लेकिन घटना अभी भी आपको बताती है कि तीर दबाया गया था।

Answer 14

कीबोर्ड इनपुट और प्रमुख संयोजनों को कैप्चर करने के लिए एक मजबूत जावास्क्रिप्ट लाइब्रेरी में प्रवेश किया। इसकी कोई निर्भरता नहीं है।

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
    }
});

Answer 15

मैं यहां उपयोगकर्ता को जाने देने के लिए एक सरल तरीके की तलाश में आया था, जब एक इनपुट पर ध्यान केंद्रित किया जाता है, तो तीर कुंजियों का उपयोग +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);
    }
}); 

Answer 16

कॉफी और जेकरी के साथ

  $(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()