javascript इन - जावास्क्रिप्ट में तीर कुंजी प्रेस का पता लगाना



भाषाओं से (14)

जब तीर कुंजियों में से एक दबाया जाता है तो मैं कैसे पता लगा सकता हूं? मैंने इसका पता लगाने के लिए इसका इस्तेमाल किया:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

हालांकि यह हर दूसरी कुंजी के लिए काम करता है, यह तीर कुंजियों के लिए नहीं था (शायद क्योंकि ब्राउज़र को डिफ़ॉल्ट रूप से इन चाबियों पर स्क्रॉल करना होता है)।


Answers

जवाब दें कि आपको keydown आवश्यकता नहीं है।

मान लीजिए कि कुंजी दबाए जाने पर आप लगातार कुछ स्थानांतरित करना चाहते हैं, मुझे लगता है कि कुंजीपटल ओपेरा को छोड़कर सभी ब्राउज़रों के लिए काम करता है। ओपेरा के लिए, keydown केवल 1 प्रेस पर ट्रिगर करता है। ओपेरा उपयोग को समायोजित करने के लिए:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc

जब तक मैं इस पोस्ट में नहीं आया तब तक मैं इस जवाब की भी तलाश कर रहा था।

मुझे अपनी समस्या के प्रति सौजन्य से अलग-अलग चाबियों के कीकोड को जानने का एक और समाधान मिला है। मैं बस अपना समाधान साझा करना चाहता था।

कंसोल में मान लिखने के लिए बस keyup / keydown ईवेंट का उपयोग करें / event.keyCode का उपयोग करके event.keyCode अलर्ट करें। पसंद-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- रुपएएम


मैं उन्हें jQuery के साथ फंसाने में सक्षम हूं:

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

एक उदाहरण: http://jsfiddle.net/AjKjU/


function checkArrowKeys(e){
    var arrs= ['left', 'up', 'right', 'down'], 
    key= window.event? event.keyCode: e.keyCode;
    if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;

keypress - keydown उपयोग करें, गैर-प्रिंट करने योग्य कुंजी जैसे कि तीर कुंजियों के लिए keypress नहीं:

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

सबसे अच्छा जावास्क्रिप्ट कुंजी इवेंट संदर्भ मैंने पाया है (उदाहरण के लिए क्विर्कमोड से पैंट को मारना) यहां है: http://unixpapa.com/js/key.html


यह पुस्तकालय चट्टानों! https://craig.is/killing/mice

Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

यद्यपि उस पृष्ठ में कोड को हाइलाइट करने के लिए आपको अनुक्रम को थोड़ा तेज़ करने की आवश्यकता है।


यह क्रोम और फ़ायरफ़ॉक्स के लिए कामकाजी कोड है

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function leftArrowPressed() {
      alert("leftArrowPressed" );
      window.location = prevUrl  
    }

    function rightArrowPressed() {
      alert("rightArrowPressed" );
      window.location = nextUrl  
    }
    function topArrowPressed() {
      alert("topArrowPressed" );
      window.location = prevUrl  
    }

    function downArrowPressed() {
      alert("downArrowPressed" );
      window.location = nextUrl  
    }

        document.onkeydown = function(evt) {
                        var nextPage = $("#next_page_link")
                        var prevPage = $("#previous_page_link")
                        nextUrl = nextPage.attr("href")
                        prevUrl = prevPage.attr("href")
        evt = evt || window.event;
        switch (evt.keyCode) {
                case 37:
                leftArrowPressed(nextUrl);
                break;

                case 38:
                topArrowPressed(nextUrl);
                break;

                 case 39:
                rightArrowPressed(prevUrl);
                break;

                case 40:
                downArrowPressed(prevUrl);
                break;

        }
    };


</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a> 
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
 </p>
</body>
</html>

कुंजी कोड %=37 और &=38 ... और केवल तीर कुंजी को बाएं = 37 अप = 38 नियंत्रित करें

function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}

संभवतः सबसे कम फॉर्मूलेशन:

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

डेमो (उपयोगकर्ता एंगस अनुदान के लिए धन्यवाद): http://jsfiddle.net/angusgrant/E3tE6/

यह क्रॉस ब्राउज़र काम करना चाहिए। यदि कोई ऐसा ब्राउज़र है जहां यह काम नहीं करता है तो एक टिप्पणी छोड़ दें।

कुंजी कोड प्राप्त करने के अन्य तरीके हैं (e.which, e.charCode, और window.event ई के बजाय), लेकिन उन्हें आवश्यक नहीं होना चाहिए। आप उनमें से अधिकतर http://www.asquare.net/javascript/tests/KeyCode.html पर आज़मा सकते हैं। ध्यान दें कि event.keycode फ़ायरफ़ॉक्स में ऑनकीप्रेस के साथ काम नहीं करता है, लेकिन यह ऑनकीडाउन के साथ काम करता है।


event.key === "तीर राइट" ...

अधिक हालिया और अधिक क्लीनर: event.key उपयोग event.key । कोई मनमाना संख्या कोड नहीं! यदि आप पारदर्शी हैं या जानते हैं कि आपके उपयोगकर्ता आधुनिक ब्राउज़र पर हैं, तो इसका इस्तेमाल करें!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

Verbose हैंडलिंग:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

आप "w", "a", "s", "d" , या किसी अन्य कुंजी की जांच के लिए आसानी से इसका विस्तार कर सकते हैं

मोज़िला डॉक्स

समर्थित ब्राउज़र

पीएस event.code तीरों के लिए एक ही है


वह छोटा है।

function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }


यहां बताया गया है कि मैंने यह कैसे किया:

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
    keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
    delete keystate[e.keyCode];
});

if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}

यहां एक उदाहरण कार्यान्वयन है:

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});

चूंकि सवाल बहुत लोकप्रिय है, मैंने सोचा कि मैं कोड में थोड़ा आधुनिक स्वाद जोड़ सकता हूं।

// const           : creates an immutable constant
const allLinks   = document.getElementsByTagName("a");
// [].reduce.call  : gives access to the reduce method on a HTMLCollection
// () => {}        : ES6 arrow function
const foundLinks = [].reduce.call(allLinks, (sum, link) => {
     // bitwise OR : converts the boolean value to a number
     return sum + (link.classList.contains("title") | 0);
}, 0);

// template literal
console.log(`Found ${foundLinks || "no"} title class`);

बीटीडब्लू, सही जवाब गलत वर्तनी String.contains या गैर-मानक String.contains । बाहरी पुस्तकालय लोड करना (विशेष रूप से यदि कोड शुद्ध जावास्क्रिप्ट में लिखा गया है) या String.prototype साथ String.prototype या नियमित अभिव्यक्ति का उपयोग करना थोड़ा अधिक है।





javascript keypress keyboard-events