JavaScript -如何创建按键事件？

rfbsl7qr  于 2023-06-28  发布在  Java
关注(0)|答案(7)|浏览(113)

我已经在互联网上寻找这个和所有我能找到的是贬值的功能，所以在张贴前，请检查，以确保您建议的代码没有贬值。
我发现了这个并尝试了一下：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent

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

但经过进一步检查，KeyboardEventInit贬值了。
我想在CTRL + K键的压力下创建一个事件。

JavaScript

7条答案

按热度按时间
whlutmcx

whlutmcx1#

键盘上的每个按钮都有一个特定的键码。所有人都在这里http://keycode.info/。

$(document).keyup(function(e) {
    if (e.keyCode === 13) function();   // enter
    if (e.keyCode === 27) function();   // esc
});
赞(0）分享  回复(0）举报  2023-06-28
l7wslrjt

l7wslrjt2#

以下是检测CTRL + k按键事件的vanilla JS解决方案：

已更新，以同时 * 触发 * 事件。

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>
赞(0）分享  回复(0）举报  2023-06-28
nwnhqdif

nwnhqdif3#

你可以使用一个叫做shortcut.js的库。下面是它们源代码链接，可供下载：http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js
然后运行你的代码，使这个函数：

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

下面是文档：http://www.openjs.com/scripts/events/keyboard_shortcuts/
希望能有所帮助。

赞(0）分享  回复(0）举报  2023-06-28
0yg35tkg

0yg35tkg4#

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>
赞(0）分享  回复(0）举报  2023-06-28
bvn4nwqk

bvn4nwqk5#

<!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>Survey-Monkry-Quiz-App</title>
    </head>
    <body class="" style="background-color: #e9ecef !important;">
        <div class="container bg-light mt-5">
            <div class="container py-2 mt-5">
                <div class="container mt-5">
                    <div class="row gx-5">
                        <div class="col">
                            <h4 class="pb-5">ONDOT Quiz Form</h4>
                        </div>
                        <div class="col text-end">
                            <a class="btn btn-danger  text-end">
                                ONDOT
                            </a>
                        </div>
                    </div>
                    <form action="form-control">
                        <div class="question-body my-1">
                            <div class="question-p">
                                <p class="fs-2" style="text-align: justify;">Q1.How innovative are you  and what you decided for next?</p>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-a"
                                    id="flexRadioDefault1"
                                    onclick="counter()"
                                    checked
                                >
                                <label class="form-check-label" for="flexRadioDefault1">
                                    Good
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-a"
                                    id="flexRadioDefault2"
                                    
                                    checked
                                >
                                <label class="form-check-label" for="flexRadioDefault2">
                                    Average
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-a"
                                    id="flexRadioDefault3"
                                    checked
                                >
                                <label class="form-check-label" for="flexRadioDefault3">
                                    Expert
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-a"
                                    id="flexRadioDefault4"
                                    
                                    checked
                                >
                                <label class="form-check-label" for="flexRadioDefault4">
                                    Beginner
                                </label>
                            </div>
                        </div>
                        <hr>

                        <div class="question-body my-1">
                            <div class="question-p">
                                <p class="fs-2" style="text-align: justify;">Q2.How innovative are you  and what you decided for next?</p>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-b"
                                    id="flexRadioDefault5"
                                >
                                <label class="form-check-label" for="flexRadioDefault5">
                                    Good
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-b"
                                    id="flexRadioDefault6"
                                    checked
                                >
                                <label class="form-check-label" for="flexRadioDefault6">
                                    Average
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-b"
                                    id="flexRadioDefault7"
                                >
                                <label class="form-check-label" for="flexRadioDefault7">
                                    Expert
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-b"
                                    id="flexRadioDefault8"
                                    checked
                                >
                                <label class="form-check-label" for="flexRadioDefault8">
                                    Beginner
                                </label>
                            </div>
                        </div>
                        <hr>
                        <div class="question-body my-1">
                            <div class="question-p">
                                <p class="fs-2" style="text-align: justify;">Q3.How innovative are you  and what you decided for next?</p>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-c"
                                    id="flexRadioDefault9"
                                >
                                <label class="form-check-label" for="flexRadioDefault8">
                                    Good
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-c"
                                    id="flexRadioDefault10"
                                    checked
                                >
                                <label class="form-check-label" for="flexRadioDefault10">
                                    Average
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-c"
                                    id="flexRadioDefault11"
                                >
                                <label class="form-check-label" for="flexRadioDefault11">
                                    Expert
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="flexRadioDefault-c"
                                    id="flexRadioDefault12"
                                    checked
                                >
                                <label class="form-check-label" for="flexRadioDefault12">
                                    Beginner
                                </label>
                            </div>
                        </div>
                        <hr>
                        <div class="question-body my-1">
                            <div class="question-p">
                                <p class="fs-2" style="text-align: justify;">Q4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At alias repudiandae consequuntur corrupti? ?</p>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                <label class="form-check-label" for="flexCheckDefault">
                                    Good
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                <label class="form-check-label" for="flexCheckDefault">
                                 Best
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                <label class="form-check-label" for="flexCheckDefault">
                                 Average
                                </label>
                            </div>
                            <div class="form-check my-3 ps-5 fs-5">
                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                    <label class="form-check-label" for="flexCheckDefault">
                                     All the above
                                    </label>
                            </div>
                        </div>
                        <hr>
                        <div class="pb-5" style=" text-align: center;">
                            <button type="submit"  class="btn" style="color:white;background-color: #00bf6f !important;">Submit</button>
                        </div>
                    </form>
                </div>
                <hr>
                <div class="container fixed-bottom">
                    <ul class="nav justify-content-center py-4" style="background-color: #00bf6f !important;">
                        <div class="progress" style="width: 65%;">
                            <div
                                class="progress-bar"
                                id="progress-bar"
                                role="progressbar"
                                style="width: 0;"
                                aria-valuenow="25"
                                aria-valuemin="0"
                                aria-valuemax="100"
                            ></div>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <!-- White Color Shade -->
        <!--    #f8f9fa;
                 #e9ecef;
                 #dee2e6;
                 #ced4da; -->
        <!-- 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>
       
        <!-- onkeyup event progress bar -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
    function counter(){
        var txt=jQuery('#txt').val();
        var len=500;
        jQuery('#progress-bar').css('width',len);
        //var final_avaliable=160-len;
        jQuery('#counter_number').html(len);
    }
        </script>
        <!-- <script type="text/javascript">
            window.addEventListener('scroll', function(){
                let num = (window.scrollY/window.innerHeight)*4;
                document.getElementById('question-body').style.webkitFilter = 'blur('+num+'px)'
            })
        </script> -->
    </body>
</html>
赞(0）分享  回复(0）举报  2023-06-28
wztqucjr

wztqucjr6#

$(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;
        }
    });
});

我和一个朋友就是这样让它工作的

赞(0）分享  回复(0）举报  2023-06-28
uurv41yg

uurv41yg7#

但你也要添加这个表单：

<!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>
赞(0）分享  回复(0）举报  2023-06-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com