Javascript - How to create a keypress event?

Question

I've looked on the internet for this and all I can find are depreciated functions so before posting please check to make sure that the code you suggest isn't depreciated.

I've found this and tried it: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent

$(document).ready(function () {
    var x = new KeyboardEvent("FormatCode", deprectiatedArgument);
});

But after further inspection the KeyboardEventInit is depreciated.

I would like to create an event on pres of the CTRL + K keys.

Possible duplicate of [Trigger a keypress/keydown/keyup event in JS/jQuery?](http://stackoverflow.com/questions/3368578/trigger-a-keypress-keydown-keyup-event-in-js-jquery) — blgt, Jul 20 '16 at 14:23
@blgt It's not a possible duplicate at all. The link which you provided included the person askingt o detect for a key press of one key. I am asking to detect for the key press of CTRL + K. CTRL is not detected by keypress(). Perhaps read the question first instead of just the title — Andrew Kilburn, Jul 20 '16 at 14:25
The question is asking about programatically triggering (note: not detecting) a keyboard event, which the linked question *does* answer. Adding a modifier to a thus created event is trivial. As currently worded, it's exactly duplicate. You should edit in an explanation as to what the difference is — blgt, Jul 20 '16 at 14:35

score 2 · Answer 1 · edited Jul 20 '16 at 14:40

2

You have a specific key code for every button on the keyboard. All of them are here http://keycode.info/.

$(document).keyup(function(e) {
    if (e.keyCode === 13) function();   // enter
    if (e.keyCode === 27) function();   // esc
});

edited Jul 20 '16 at 14:40

Zakaria Acharki

66,747
15
75
101

answered Jul 20 '16 at 14:24

aleksa95

69
3

Moob · Answer 2 · 2016-07-20T15:26:34.520

1

Here's a vanilla JS solution to detect a CTRL + k keypress event:

UPDATED to also trigger the event.

document.addEventListener("keypress", function(e) {
  if ((e.ctrlKey || e.metaKey) && (e.keyCode == 11 || e.keyCode == 75)) {
    alert("ctrl+k!");
  }
});


document.getElementById("trigger").addEventListener("click", function(){
  //trigger a keypress event...
  var e = document.createEvent('HTMLEvents');
    e.initEvent("keypress", false, true);
    e.ctrlKey = true;
    e.keyCode = 75;
  document.dispatchEvent(e);
});

Press <kbd>ctrl+k</kbd> or
<a href="#" id="trigger">trigger the event</a>

edited Jul 20 '16 at 15:26

answered Jul 20 '16 at 14:35

Moob

14,420
1
34
47

Answer explains how to detect, not how to trigger, the event – blgt Jul 20 '16 at 14:42
@blgt That was not clear in your question. I've updated my answer to include an example of _triggering_ the event. – Moob Jul 20 '16 at 15:28

score 0 · Answer 3 · answered Jul 20 '16 at 14:44

you can use a library called shortcut.js .. here is a link to their source code for downloading: http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

then run ur code by making this function:

shortcut.add("Ctrl+K",function() {
    alert("Hi there!");
});

and here is the documentation : http://www.openjs.com/scripts/events/keyboard_shortcuts/

hope that can help.

score 0 · Answer 4 · answered Jun 23 '23 at 10:28

Tu as pan karu shakto

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
            crossorigin="anonymous"
        >
        <title>Hello, world!</title>
    </head>
    <body class="bg-dark">
        <div class="container bg-light mt-5" style="height: 100%;">
            <!-- <h1>Hello, Tolks</h1> -->
            <div class="container p-5">
                <div class="row gx-5">
                    <div class="col">
                        <h4 class="py-3">ONDOT Quiz</h4>
                    </div>
                    <div class="col">
                        <h5 class="py-3 bg-light text-end">
                            <a href="#" class="rounded border bg-danger p-2 px-2" style="text-decoration: none;color:white;">Time Left
                                <span class="rounded bg-dark px-2">
                                    60:00
                                </span>
                            </a>
                        </h5>
                    </div>
                </div>
                <hr>
                <!-- Question part -->
                <div class="my-4">
                    <h5>Q1. How to make question easy in html Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, veniam.?</h5>
                </div>
                <!-- Answer Part -->
                <div class="form-check pt-2 border bg-light my-2">
                    <div class=" px-2 py-2">
                        <input
                        class="form-check-input"
                        type="radio"
                        name="flexRadioDefault"
                        id="flexRadioDefault1"
                    >
                        <label class="form-check-label" for="flexRadioDefault1">
                            Answer Number 1
                        </label>
                    </div>
                </div>
                <div class="form-check pt-2 border bg-light my-2">
                    <div class=" px-2 py-2">
                        <input
                        class="form-check-input"
                        type="radio"
                        name="flexRadioDefault"
                        id="flexRadioDefault1"
                    >
                        <label class="form-check-label" for="flexRadioDefault1">
                            Answer Number 2
                        </label>
                    </div>
                </div>
                <div class="form-check pt-2 border bg-light my-2">
                    <div class=" px-2 py-2">
                        <input
                        class="form-check-input"
                        type="radio"
                        name="flexRadioDefault"
                        id="flexRadioDefault1"
                    >
                        <label class="form-check-label" for="flexRadioDefault1">
                            Answer Number 3
                        </label>
                    </div>
                </div>
                <div class="form-check pt-2 border bg-light my-2">
                    <div class=" px-2 py-2">
                        <input
                        class="form-check-input"
                        type="radio"
                        name="flexRadioDefault"
                        id="flexRadioDefault1"
                    >
                        <label class="form-check-label" for="flexRadioDefault1">
                            Answer Number 4
                        </label>
                    </div>
                </div>
                <hr>
                <!-- Next Quetion Part or Number of Quetions -->
                <div class="row gx-5 my-3">
                    <div class="col">
                        <h5 class="p-3 bg-light">1 of 2 Question</h5>
                    </div>
                    <div class="col">
                        <h4 class="py-3 ps-5 text-end">
                            <button class="btn btn-primary">Next</button>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
        <!-- Option 1: Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
</html>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 25 '23 at 07:12

score -1 · Answer 5 · answered Jul 20 '16 at 14:36

-1

$(document).ready(function () {
    var bool = false;
    $(document).keydown(function (e) {
        if (e.keyCode === 17) {
            bool = true;
        }
        if (bool == true && e.keyCode == 75) {
            alert("");
        }
    });
    $(document).keyup(function (e) {
        if (e.keyCode === 17) {
            bool = false;
        }
    });
});

This is how me and a friend got it working

answered Jul 20 '16 at 14:36

Andrew Kilburn

2,251
6
33
65

There's no jquery tag in your OP?!! – Zakaria Acharki Jul 20 '16 at 14:38
2

may I ask you why did you downvote my answer when it actually does what you asked ? Did you at least checked the fiddle I posted before downvoting? – EddNewGate Jul 20 '16 at 14:39
1

@EddNewGate I haven't downvoted anyone. Im getting downvoted too, i think there are a lot of salty people in this thread – Andrew Kilburn Jul 20 '16 at 14:46

score -1 · Answer 6 · edited Jun 27 '23 at 14:52

But you will add this form also:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <title>Quiz Form</title>
</head>

<body class="bg-dark">
  <div class="container bg-light mt-5" style="height: 100%;">
    <!-- <h1>Hello, Tolks</h1> -->
    <div class="container p-5">
      <div class="row gx-5">
        <div class="col">
          <h4 class="py-3">ONDOT Quiz Form</h4>
        </div>
        <div class="col">
          <h5 class="py-3 bg-light text-end">
            <a href="#" class="rounded border bg-danger p-2 px-2" style="text-decoration: none;color:white;">ONDOT 
              <span class="rounded bg-dark px-2">
                Marketing
              </span>
            </a>
          </h5>
        </div>
      </div>
      <hr>
      <!-- Form Part -->
      <form action="quiz-app.html">
        <div class="row">
          <div class="col mb-3">
            <label for="employeeid" class="form-label">Emplyoee ID</label>
            <input type="number" class="form-control" name="emplyoeeId" id="emplyoeeId">
          </div>
          <div class="col mb-3">
            <label for="department" class="form-label">Department</label>
            <input type="text" class="form-control" name="department" id="department">
          </div>
          <div class="col mb-3">
            <label for="department" class="form-label">Emplyoee Name</label>
            <input type="text" class="form-control" name="department" id="department">
          </div>
        </div>
        <div class="row text-center">

          <div class="col">
            <button type="submit" class="btn btn-danger">Submit</button>
          </div>
        </div>
      </form>
      <hr>
      <!-- Below part -->
      <!-- <div class="row gx-5 my-3">
        <div class="col">
          <h5 class="p-3 bg-light">1 of 2 Question</h5>
        </div>
        <div class="col">
          <h4 class="py-3 ps-5 text-end">
            <button class="btn btn-primary">Next</button>
          </h4>
        </div>
      </div> -->
    </div>
  </div>
  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

Answer needs supporting information Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](https://stackoverflow.com/help/how-to-answer). — moken, Jun 29 '23 at 09:37

Javascript - How to create a keypress event?

6 Answers6

Linked

Related