अगर jQuery के साथ क्लिक इवेंट के दौरान कोई कुंजी दबाया जाता है तो मैं कैसे जांच सकता हूं?

105

मैं jQuery के साथ एक क्लिक इवेंट को पकड़ना चाहता हूं और यह बताने में सक्षम हो सकता हूं कि क्या किसी कुंजी को उसी समय दबाया गया था, इसलिए मैं कीबोर्ड इवेंट के आधार पर कॉलबैक फ़ंक्शन के भीतर कांटा कर सकता हूं।

उदाहरण के लिए:

$("button").click(function() {
    if([KEYPRESSED WHILE CLICKED]) {
        // Do something...
    } else {
        // Do something different...
    }
});

क्या यह संभव है या यदि यह संभव है तो यह कैसे किया जा सकता है?

— डेनियल स्मिथ
स्रोत

174

आप आसानी से शिफ्ट, ऑल्ट और कंट्रोल कीज को प्रॉपर्टीज से पहचान सकते हैं;

$("button").click(function(evt) {
  if (evt.ctrlKey)
    alert('Ctrl down');
  if (evt.altKey)
    alert('Alt down');
  // ...
});

अधिक गुणों के लिए quirksmode देखें । यदि आप अन्य कुंजियों का पता लगाना चाहते हैं, तो क्लेटस का उत्तर देखें ।

— kkyy
स्रोत

3

मैं उस संपत्ति को jQuery इवेंट ऑब्जेक्ट पर नहीं देखता: api.jquery.com/category/events/event-object

— cletus

1

खैर, जैसा कि पृष्ठ कहता है, "मूल घटना से अधिकांश गुणों को कॉपी किया जाता है और नई घटना ऑब्जेक्ट को सामान्यीकृत किया जाता है।" ctrlKey, altKey इत्यादि एक्मास्क्रिप्ट मानक का हिस्सा हैं (पूर्वोक्त jquery एपि पृष्ठ पर पहला लिंक देखें), इसलिए (कम से कम सभ्य ब्राउज़र में) ईवेंट ऑब्जेक्ट में आमतौर पर वे गुण भी सेट होते हैं।

— काकी

3

Quirks मोड केवल कहता है कि ये एक महत्वपूर्ण घटना में परिभाषित हैं .. एक माउस घटना के बारे में कोई उल्लेख नहीं है।

6

तुम भी मैक ओएस एक्स की कमांड कुंजी का उपयोग कर पता लगा सकते हैं if (e.metaKey) alert('Command down')। यहाँ जेएस में महत्वपूर्ण घटनाओं के बारे में एक अच्छा लेख है unixpapa.com/js/key.html

— F Lekschas

48

आपको महत्वपूर्ण स्थिति का उपयोग करके अलग से ट्रैक करने की आवश्यकता है keydown()और keyup():

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = true;
  }
}).keyup(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = false;
  }
});

कुंजी कोड की सूची देखें । अब आप देख सकते हैं कि:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});

— cletus
स्रोत

6

इस पद्धति का एक डाउन साइड (यह नहीं कि मैं एक बेहतर तरीका जानता हूं) यदि आप ALT कुंजी का पता लगा रहे हैं, और उपयोगकर्ता ALT-Tabs को किसी अन्य विंडो में खोज रहा है, तो ब्राउज़र द्वारा कीअप ईवेंट का पता नहीं लगाया जाता है क्योंकि यह किसी अन्य एप्लिकेशन पर हुआ है । उस बिंदु से, jquery को लगता है कि कुंजी नीचे है, जब तक कि वे आपके jquery ऐप में कीप न कर दें। यह केवल ALT कुंजी के साथ मायने रखता है, जहां तक मैं कल्पना कर सकता हूं।

— फ्लैट कैट

1

मैक ओएस एक्स के लिए जो सीएमडी-टैब होगा, लेकिन मुझे लगता है कि प्रिंसिपल अभी भी पकड़ में है

— murftown

1

या ब्राउज़र टैब बदलने के लिए Ctrl + Tab

— Seeven

9

मैं अकेले जावास्क्रिप्ट के साथ इसका उपयोग करने में सक्षम था

 <a  href="" onclick="return Show(event)"></a>

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }

— अरुण प्रसाद ई.एस.
स्रोत

1

इसके अलावा, मैंने एक छोटा समायोजन और एक पेन बनाया: codepen.io/vr_driver/pen/YRoRYO

— vr_driver

3

@ अरुण प्रसाद की गड़गड़ाहट को चोरी किए बिना , यहां एक शुद्ध जेएस स्निपेट है जिसे मैंने डिफ़ॉल्ट कार्रवाई को रोकने के लिए दोहराया था, जो कि सीटीएल + क्लिक दबाए जाने पर अन्यथा एक नई विंडो खोलेगी।

function Show(event) 
{
  if (event.ctrlKey) 
  {
    alert('Ctrl held down which clicked');
  } 
  else 
  {
    alert('Ctrl NOT pressed');
  }
  return false
}

<p>Hold down CTL on the link to get a different message</p>

<a href="" onclick="return Show(event)">click me</a>

स्निपेट का विस्तार करें

— vr_driver
स्रोत