键盘组合键

最新推荐文章于 2024-08-16 10:12:25 发布

moonlight201868

最新推荐文章于 2024-08-16 10:12:25 发布

阅读量883

点赞数

本文链接：https://blog.csdn.net/moonlight201868/article/details/80893219

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .box1{
            width: 1000px;
            height: 50px;
            margin: 100px auto;
            text-align: center;
        }
        .word{
            width: 300px;
            height: 30px;
        }
        ul{
            width: 400px;
            margin: 100px auto;
        }
        .btn{
            margin-left: 20px;
        }
    </style>
</head>
<body>
      <div class="box1">
          <input type="text" class="word">
          <input type="button" value="点击" class="btn">
      </div>

           <ul></ul>
      <script>
             var word = document.getElementsByClassName("word")[0];
              var ul = document.getElementsByTagName("ul")[0];
              var btn = document.getElementsByClassName("btn")[0];

             btn.addEventListener("click",fn);

             function fn() {
                  var oli = document.createElement("li");
                  ul.appendChild(oli);
                 oli.innerText = word.value
                 word.value=""
              }

             document.onkeydown=function (ev) {
                 var ev=window.event||ev;
//                 var keyCode = ev.keyCode;

                 if(ev.altKey&&ev.keyCode==13){
                     var oli = document.createElement("li");
                     ul.appendChild(oli);
                     oli.innerText = word.value
                     word.value=""
                 }
             }

      </script>
</body>
</html>