Keyboard Events
In this page:
$(selector).keydown(function (event) {
// event.which
});
$(selector).keyup(handler);
$(selector).keypress(handler);Keydown
keydown event उस instant fire होता है जब कोई key नीचे दबाई जाती है, character (अगर कोई हो) register होने से पहले। यह इसे arrow keys या Escape जैसी non-printing keys पकड़ने के लिए सही event बनाता है।
उदाहरण: Keydown
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field">
<script>
$("#field").on("keydown", function(event) {
console.log("Key pressed down:", event.key);
});
</script>
</body>
</html>Keyup
keyup तब fire होता है जब कोई दबाई गई key release होती है, जो इसे abhi भी दबाए जाने के बजाय एक पूरे keystroke के complete होने के बाद react करने के लिए उपयोगी बनाता है। जब आप type किए गए final character पर react करना चाहें, हर intermediate keystroke पर नहीं, तो यह इस्तेमाल करने के लिए natural event है।
उदाहरण: Keyup
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field">
<script>
$("#field").on("keyup", function(event) {
console.log("Key released:", event.key);
});
</script>
</body>
</html>Keypress
keypress एक पुराना keyboard event है जो सिर्फ character-producing keys के लिए fire होता था और अब ज़्यादातर browsers में deprecated है -- सभी नए code के लिए इसके बजाय keydown या keyup इस्तेमाल किया जाना चाहिए।
उदाहरण: Keypress
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field">
<script>
// keypress is deprecated; keydown/keyup are preferred for new code
$("#field").on("keypress", function(event) {
console.log("Character key pressed:", event.key);
});
</script>
</body>
</html>Enter Key
किसी handler के अंदर event.key पढ़ना आपको exactly बताता है कि कौन-सी key ने event trigger किया, जैसे Enter या ArrowUp, आपको किसी भी keystroke के बजाय एक specific key पर respond करने वाला logic लिखने देते हुए।
उदाहरण: Enter Key
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field">
<script>
$("#field").on("keydown", function(event) {
if (event.key === "Enter") {
console.log("Enter was pressed");
}
});
</script>
</body>
</html>Keyboard Shortcuts
event.key checks को event.ctrlKey या event.shiftKey जैसी modifier flags के साथ combine करना आपको simple keyboard shortcuts बनाने देता है, जैसे किसी form के अंदर Ctrl+S detect करना। यहाँ भी event.preventDefault() call करना याद रखना अक्सर ज़रूरी है, क्योंकि कुछ key combinations की default browser behavior होती है जिसे आपको override करना पड़ता है।
उदाहरण: Keyboard Shortcuts
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field">
<script>
$("#field").on("keydown", function(event) {
if (event.ctrlKey && event.key === "s") {
event.preventDefault();
console.log("Ctrl+S shortcut triggered");
}
});
</script>
</body>
</html>event.keyCodeपढ़ना और magic numbers से compare करना, जबकि"Enter"जैसाevent.keyज़्यादा साफ़ और current है।- deprecated
keypressevent इस्तेमाल करना, जो arrows या Escape जैसी keys के लिए fire नहीं होता। keydownमें किसी input की value पढ़ना और नए character के शामिल होने की उम्मीद करना, जबकি value सिर्फ key process होने के बाद update होती है, इसलिएkeyupयाinputसही event है।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: