जब एक तीर कुंजी दबाया जाता है तो मैं कैसे पता लगा सकता हूं? मैंने इसका उपयोग यह जानने के लिए किया:
function checkKey(e) {
var event = window.event ? window.event : e;
console.log(event.keyCode)
}यद्यपि यह हर दूसरी कुंजी के लिए काम करता था, यह तीर कुंजी के लिए नहीं था (हो सकता है कि क्योंकि ब्राउज़र डिफ़ॉल्ट रूप से इन कुंजियों पर स्क्रॉल करना चाहता है)।
जवाबों:
तीर कुंजी केवल द्वारा ट्रिगर की जाती है onkeydown, नहीं onkeypress।
कीकोड हैं:
53एक keydownघटना के साथ मिलता है । आप के 37साथ keypress, जो एक अलग बात है
onkeyupवहां की घटना को भी सुनें और रोकें। हालाँकि, आपको जावास्क्रिप्ट के साथ UI व्यवहार को संशोधित नहीं करना चाहिए।
कुंजी अप और डाउन कॉल फ़ंक्शन पर। प्रत्येक कुंजी के लिए अलग-अलग कोड होते हैं।
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
// up arrow
}
else if (e.keyCode == '40') {
// down arrow
}
else if (e.keyCode == '37') {
// left arrow
}
else if (e.keyCode == '39') {
// right arrow
}
}e = e ? e : window.event; या:if (typeof(e) === "undefined") { e = window.event; }
keyCode === 32नहीं । keyCode == '32'keyCode === '32'
हाल ही में और अधिक क्लीनर: का उपयोग करें event.key। कोई और अधिक मनमानी संख्या कोड! यदि आप ट्रांसप्लान कर रहे हैं या जानते हैं कि आपके उपयोगकर्ता सभी आधुनिक ब्राउज़र पर हैं, तो इसका उपयोग करें!
node.addEventListener('keydown', function(event) {
const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});वर्बोस हैंडलिंग:
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"या किसी अन्य कुंजी की जांच के लिए इसे बढ़ा सकते हैं
PS तीरों के लिएevent.code समान है
keyऔर नहीं keyCode, कि पदावनत किया गया था।
संभवतः सबसे कठिन सूत्रीकरण:
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 e के बजाय), लेकिन वे आवश्यक नहीं होने चाहिए। आप उनमें से अधिकांश को http://www.asquare.net/javascript/tests/KeyCode.html पर आज़मा सकते हैं । ध्यान दें कि Firefox में onkeypress के साथ event.keycode काम नहीं करता है, लेकिन यह onkeydown के साथ काम करता है।
उपयोग करें keydown, न keypressकि मुद्रण योग्य कुंजियों जैसे कि तीर कुंजियों के लिए:
function checkKey(e) {
e = e || window.event;
alert(e.keyCode);
}
document.onkeydown = checkKey;सबसे अच्छा जावास्क्रिप्ट कुंजी घटना संदर्भ मैंने पाया है (उदाहरण के लिए, quirksmode से पैंट को पीटना) यहाँ है: http://unixpapa.com/js/key.html
मेरा मानना है कि सबसे हालिया तरीका होगा:
document.addEventListener("keydown", function(event) {
event.preventDefault();
const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
switch (key) { // change to event.key to key to use the above variable
case "ArrowLeft":
// Left pressed
<do something>
break;
case "ArrowRight":
// Right pressed
<do something>
break;
case "ArrowUp":
// Up pressed
<do something>
break;
case "ArrowDown":
// Down pressed
<do something>
break;
}
});यह मानता है कि डेवलपर चाहता है कि कोड पृष्ठ पर कहीं भी सक्रिय हो और ग्राहक को किसी अन्य कुंजी प्रेस की उपेक्षा करनी चाहिए। ईवेंट को हटा दें ।preventDefault (); यदि इस हैंडलर द्वारा पकड़े गए लोगों सहित कीपेस अभी भी सक्रिय होना चाहिए।
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;arrsफ़ंक्शन के बाहर रखने के लायक नहीं है ? इसे हर कॉल को फिर से बनाने की ज़रूरत नहीं है
यहाँ एक उदाहरण कार्यान्वयन है:
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);
}
});var targetElement = typeof $0 !== 'undefined' ? $0 : document.body; या बस: var targetElement = document.body;ठीक है
यहाँ है कि मैंने यह कैसे किया:
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.
}मैं उन्हें jQuery के साथ फंसाने में सक्षम है:
$(document).keypress(function (eventObject) {
alert(eventObject.keyCode);
});एक उदाहरण: http://jsfiddle.net/AjKjU/
keypressतीर कुंजी के साथ काम नहीं करेगा। आपको $(document).on('keydown', function() {...})इसके बजाय उपयोग करना होगा
यह क्रोम और फ़ायरफ़ॉक्स के लिए काम करने वाला कोड है
<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>मैं भी इस उत्तर की तलाश में था जब तक कि मैं इस पद पर नहीं आया।
मैंने अपनी समस्या के सौजन्य से अलग-अलग कुंजियों के कीकोड को जानने के लिए एक और उपाय खोजा है। मैं सिर्फ अपना समाधान साझा करना चाहता था।
कंसोल में मान लिखने के लिए बस की-अप / कीडाउन इवेंट का उपयोग करें / उसी का उपयोग करते हुए अलर्ट करें event.keyCode। पसंद-
console.log(event.keyCode)
// or
alert(event.keyCode)- रूपम
वह छोटा है।
function IsArrows (e) {
return (e.keyCode >= 37 && e.keyCode <= 40);
}
if ([37,38,39,40].indexOf(e.keyCode)!=-1){ console.log('arrow pressed') }
यह पुस्तकालय चट्टानों! https://craig.is/killing/mice
Mousetrap.bind('up up down down left right left right b a enter', function() {
highlight([21, 22, 23]);
});हालाँकि आपको उस पृष्ठ के कोड को हाइलाइट करने के लिए अनुक्रम को थोड़ा तेज़ी से दबाना होगा।
जवाब पुन कि आप की आवश्यकता keydownनहीं keypress।
यह मानते हुए कि कुंजी दबाए रखते हुए आप लगातार कुछ स्थानांतरित करना चाहते हैं, मुझे लगता है कि keydownओपेरा को छोड़कर सभी ब्राउज़रों के लिए काम करता है। ओपेरा के लिए, keydownकेवल 1 प्रेस पर ट्रिगर होता है। ओपेरा उपयोग को समायोजित करने के लिए:
document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etcएरो कीज को कीप पर ट्रिगर किया जाता है
$(document).on("keyup", "body", function(e) {
if (e.keyCode == 38) {
// up arrow
console.log("up arrow")
}
if (e.keyCode == 40) {
// down arrow
console.log("down arrow")
}
if (e.keyCode == 37) {
// left arrow
console.log("lefy arrow")
}
if (e.keyCode == 39) {
// right arrow
console.log("right arrow")
}
})onkeydown ctrl, alt, shits की अनुमति देता है
onkeyup टैब, ऊपर तीर, नीचे तीर, बाएँ तीर, नीचे तीर की अनुमति देता है
यदि आप jquery का उपयोग करते हैं तो आप भी ऐसा कर सकते हैं,
$(document).on("keydown", '.class_name', function (event) {
if (event.keyCode == 37) {
console.log('left arrow pressed');
}
if (event.keyCode == 38) {
console.log('up arrow pressed');
}
if (event.keyCode == 39) {
console.log('right arrow pressed');
}
if (event.keyCode == 40) {
console.log('down arrow pressed');
}
});साथ कुंजी और ES6।
यह आपको स्विच का उपयोग किए बिना प्रत्येक तीर कुंजी के लिए एक अलग फ़ंक्शन देता है और जब NumLockयह चालू होता है , तो numpad में 2,4,6,8 कुंजी के साथ काम करता है।
const element = document.querySelector("textarea"),
ArrowRight = k => {
console.log(k);
},
ArrowLeft = k => {
console.log(k);
},
ArrowUp = k => {
console.log(k);
},
ArrowDown = k => {
console.log(k);
},
handler = {
ArrowRight,
ArrowLeft,
ArrowUp,
ArrowDown
};
element.addEventListener("keydown", e => {
const k = e.key;
if (handler.hasOwnProperty(k)) {
handler[k](k);
}
});<p>Click the textarea then try the arrows</p>
<textarea></textarea>
keypressतीर कुंजी के लिए घटनाओं को ट्रिगर करते हैं , लेकिन आप सही हैं किkeydownहमेशा तीर कुंजी के लिए काम करता है।