कैसे पता करें कि किस चरित्र कुंजी को दबाया गया है?

118

मैं यह पता लगाना चाहूंगा कि शुद्ध जावास्क्रिप्ट में क्रॉस-ब्राउज़र संगत तरीके से किस वर्ण कुंजी को दबाया गया है।

javascript dom-events keypress

— xXx
स्रोत

1

सवाल के लिए इन सभी जवाब नहीं है "क्या कुंजी दबाया गया था ?" क्या होगा अगर यह निष्पादित हो रहा है, तो जावास्क्रिप्ट कोड जानना चाहता है कि क्या कीबोर्ड पर एक कुंजी वर्तमान में नीचे रखी गई है?

— मस्तम

2

event.keyसीधे आपको दिए गए चार

— गिबोल्ट

158

"स्पष्ट" जावास्क्रिप्ट:

<script type="text/javascript">
  function myKeyPress(e){
    var keynum;

    if(window.event) { // IE                    
      keynum = e.keyCode;
    } else if(e.which){ // Netscape/Firefox/Opera                   
      keynum = e.which;
    }

    alert(String.fromCharCode(keynum));
  }
</script>

<form>
  <input type="text" onkeypress="return myKeyPress(event)" />
</form>

JQuery:

$(document).keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});

— Coyod
स्रोत

6

यह वर्णमाला वर्ण के लिए ठीक काम करता है, लेकिन डॉट्स / ब्रैकेट और अन्य टाइपोगैप्टिक प्रतीकों के बारे में क्या?

— VoVaVc

6

@VoVaVc: यह उन लोगों के लिए भी काम करता है। महत्वपूर्ण चीज keypressघटना का उपयोग कर रही है , जो आपको एक चरित्र कोड देता है, बजाए keyupया keydownजो आपको एक महत्वपूर्ण कोड देता है।

— टिम डाउन

2

@aljgom, e.keyअभी भी पूर्ण ब्राउज़र समर्थन नहीं करता है।

— एंडी मर्सर

1

उन प्रतीकों के लिए काम नहीं करता है जिन्हें आपको शिफ्ट करने के लिए प्रेस करना है, जैसे!

— कर्टिस

5

@AndyMercer कुंजी अब सभी प्रमुख ब्राउज़रों द्वारा समर्थित है: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…

— Ray

34

यहाँ इस सवाल के एक लाख डुप्लिकेट हैं, लेकिन यहाँ फिर से वैसे भी जाता है:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

प्रमुख घटनाओं पर सबसे अच्छा संदर्भ मैंने देखा है http://unixpapa.com/js/key.html ।

— टिम डाउन
स्रोत

23

हाल ही में और अधिक क्लीनर: उपयोग करें event.key। कोई और अधिक मनमानी संख्या कोड!

नोट: पुराने गुण ( .keyCodeऔर .which) पदावनत हैं।

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

यदि आप यह सुनिश्चित करना चाहते हैं कि केवल एकल वर्ण दर्ज किए गए हैं, तो जांच करें key.length === 1, या यह कि आपके द्वारा अपेक्षित पात्रों में से एक है।

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

ब्राउज़रों का समर्थन किया

— Gibolt
स्रोत

क्या यह नोड.जेएस के लिए है?

— मेरीबोट

नहीं, नोड का अर्थ केवल कोई DOM तत्व है। यदि आपके पास Node.js एक UI से कनेक्ट होता है, तो मुझे लगता है कि यह काम करेगा

— गिबोल्ट

कुछ मोबाइल डिवाइस के लिए कीडाउन काम नहीं करता है यह अपरिभाषित लौटाता है

— एंजेलोटी

4

प्रयत्न:

<table>
<tr><td>Key:</td><td id="key"></td></tr>
<tr><td>Key Code:</td><td id="keyCode"></td></tr>
<tr><td>Event Code:</td><td id="eventCode"></td></tr>
</table>
<script type="text/javascript">
window.addEventListener("keydown", function (e) {
  //tested in IE/Chrome/Firefox
  document.getElementById("key").innerHTML = e.key;
  document.getElementById("keyCode").innerHTML = e.keyCode;
  document.getElementById("eventCode").innerHTML = e.code;
})
</script>

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

* नोट: यह "रन कोड स्निपेट" में काम करता है

यह वेबसाइट ऊपर मेरे कोड के समान है: Keycode.info

— lewdev
स्रोत

1

इस एक का उपयोग करें:

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}

— JCasso
स्रोत

1

**check this out** 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).keypress(function(e)
        {

            var keynum;
            if(window.event)
            { // IE                 
                keynum = e.keyCode;
            }
                else if(e.which)
                    { 
                    // Netscape/Firefox/Opera                   
                    keynum = e.which;
                    }
                    alert(String.fromCharCode(keynum));
                    var unicode=e.keyCode? e.keyCode : e.charCode;
                    alert(unicode);
        });
});  

</script>
</head>
<body>

<input type="text"></input>
</body>
</html>

— kki3908050
स्रोत

1

क्या यह @ कोयोड के 2009 के उत्तर का लगभग सटीक डुप्लिकेट नहीं है?

— क्रिस एफ कैरोल

1

एक परिष्कृत तरीके से ऐसा करने के लिए मेरे पसंदीदा पुस्तकालयों में से एक मूसट्रैप है ।

यह विभिन्न प्रकार के प्लगइन्स के साथ रखता है, जिनमें से एक recordप्लगइन है जो दबाए गए कुंजी के अनुक्रम की पहचान कर सकता है।

उदाहरण:

<script>
    function recordSequence() {
        Mousetrap.record(function(sequence) {
            // sequence is an array like ['ctrl+k', 'c']
            alert('You pressed: ' + sequence.join(' '));
        });
    }
</script>


<button onclick="recordSequence()">Record</button>

— द्विध्रुव आघूर्ण
स्रोत

@DanLowe मैंने अभी एक स्निपेट जोड़ा है।

— डिपोले_मोमेंट

बिना पढ़े टाइपर्रर: Mousetrap.record, HTMLButtonElement.onclick (****। Html: 20) पर रिकॉर्डसेंसेंस (****। Html: 12) में एक फ़ंक्शन नहीं है

— इर्रिचम

-2

document.onkeypress = function(event){
    alert(event.key)
}

— gomozor
स्रोत