← Back to jQuery Course | Chapter 3: Events | Lesson 4 of 11

Keyboard इवेंट्स

keydown तब चलता है जब कोई key दबाई जाती है।

In this page:

  1. Keydown
  2. Keyup
  3. Keypress
  4. Enter Key
  5. Keyboard Shortcuts
Syntax
javascript 
$(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

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <input id="field">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#field").on("keydown", function(event) {
        $("#output").append($("<div>").text("Key pressed down: " + event.key));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Keyup

keyup तब fire होता है जब कोई दबाई गई key release होती है, जो इसे abhi भी दबाए जाने के बजाय एक पूरे keystroke के complete होने के बाद react करने के लिए उपयोगी बनाता है। जब आप type किए गए final character पर react करना चाहें, हर intermediate keystroke पर नहीं, तो यह इस्तेमाल करने के लिए natural event है।

उदाहरण: Keyup

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <input id="field">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#field").on("keyup", function(event) {
        $("#output").append($("<div>").text("Key released: " + event.key));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Keypress

keypress एक पुराना keyboard event है जो सिर्फ character-producing keys के लिए fire होता था और अब ज़्यादातर browsers में deprecated है -- सभी नए code के लिए इसके बजाय keydown या keyup इस्तेमाल किया जाना चाहिए।

उदाहरण: Keypress

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <input id="field">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      // keypress is deprecated; keydown/keyup are preferred for new code
      $("#field").on("keypress", function(event) {
        $("#output").append($("<div>").text("Character key pressed: " + event.key));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Enter Key

किसी handler के अंदर event.key पढ़ना आपको exactly बताता है कि कौन-सी key ने event trigger किया, जैसे Enter या ArrowUp, आपको किसी भी keystroke के बजाय एक specific key पर respond करने वाला logic लिखने देते हुए।

उदाहरण: Enter Key

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <input id="field">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#field").on("keydown", function(event) {
        if (event.key === "Enter") {
          $("#output").append($("<div>").text("Enter was pressed"));
        }
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </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

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <input id="field">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#field").on("keydown", function(event) {
        if (event.ctrlKey && event.key === "s") {
          event.preventDefault();
          $("#output").append($("<div>").text("Ctrl+S shortcut triggered"));
        }
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>
Related Topics

Form इवेंट्स · Mouse इवेंट्स · Window और Document Events · jQuery Events का परिचय

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. event.keyCode पढ़ना और magic numbers से compare करना, जबकि "Enter" जैसा event.key ज़्यादा साफ़ और current है।
  2. deprecated keypress event इस्तेमाल करना, जो arrows या Escape जैसी keys के लिए fire नहीं होता।
  3. 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:

← Previous Lesson The Hover Event Next Lesson → Form Events

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.