JavaScript不选中Input直接按数字输入数字

xlj

发布于 2021-07-14 12:13:16

1.9K0

发布于 2021-07-14 12:13:16

文章被收录于专栏：XLJ的技术专栏

简述

JavaScript不选中编辑框Input按键盘上的数字直接输入到Input

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监听数字键盘</title>
</head>
<body id="Body">
  <style>

    * {
      margin: 0;
      padding: 0;
    }

    html,body {
      height: 100%;
    }

    body{
      font-size: 18px;
    }

    div#bodyDiv {
      width: 100%;
      height: 100%;
    }

    div.Container {
      margin: auto;
      display: inline-block;
      text-align: center;
      width: 100%;
      margin: 10% 0;
    }

    /* 结果框 */
    input#jieGuoInput {
      background-color: none;
      border: none;
      outline: none;

      font-size: 1.5em;
      border: 1px solid #dddddd;
      padding: 2px 4px;
      background-color: #f3f3f3;

      transition: all 100ms linear;
    }
    input#jieGuoInput:hover {
      background-color: #ffffff;
      transition: all 100ms linear;
    }
  </style>

  <div id="bodyDiv">
    <div class="Container">
      <input type="text" value="0" id="jieGuoInput">
    </div>
  </div>

  <script src="js/main.js"></script>
</body>
</html>

./js/main.js

// 申明变量
var jieGuoInput = document.getElementById('jieguoInput');

document.onkeydown = function (event) {

    // document.write(event.keyCode);

    // 1
    if (event.keyCode == 97) {
        if (document.getElementById('jieGuoInput').value == 0) {
            document.getElementById('jieGuoInput').value = 1;
        } else {
            document.getElementById('jieGuoInput').value = document.getElementById('jieGuoInput').value + 1;
        }
    }
    
    // 2
    if (event.keyCode == 98) {
        if (document.getElementById('jieGuoInput').value == 0) {
            document.getElementById('jieGuoInput').value = 2;
        } else {
            document.getElementById('jieGuoInput').value = document.getElementById('jieGuoInput').value + 2;
        }
    }

    // 3
    if (event.keyCode == 99) {
        if (document.getElementById('jieGuoInput').value == 0) {
            document.getElementById('jieGuoInput').value = 3;
        } else {
            document.getElementById('jieGuoInput').value = document.getElementById('jieGuoInput').value + 3;
        }
    }

    // 4
    if (event.keyCode == 100) {
        if (document.getElementById('jieGuoInput').value == 0) {
            document.getElementById('jieGuoInput').value = 4;
        } else {
            document.getElementById('jieGuoInput').value = document.getElementById('jieGuoInput').value + 4;
        }
    }

    // 5
    if (event.keyCode == 101) {
        if (document.getElementById('jieGuoInput').value == 0) {
            document.getElementById('jieGuoInput').value = 5;
        } else {
            document.getElementById('jieGuoInput').value = document.getElementById('jieGuoInput').value + 5;
        }
    }

    // 6
    if (event.keyCode == 102) {
        if (document.getElementById('jieGuoInput').value == 0) {
            document.getElementById('jieGuoInput').value = 6;
        } else {
            document.getElementById('jieGuoInput').value = document.getElementById('jieGuoInput').value + 6;
        }
    }

    // 7
    if (event.keyCode == 103) {
        if (document.getElementById('jieGuoInput').value == 0) {
            document.getElementById('jieGuoInput').value = 7;
        } else {
            document.getElementById('jieGuoInput').value = document.getElementById('jieGuoInput').value + 7;
        }
    }

    // 8
    if (event.keyCode == 104) {
        if (document.getElementById('jieGuoInput').value == 0) {
            document.getElementById('jieGuoInput').value = 8;
        } else {
            document.getElementById('jieGuoInput').value = document.getElementById('jieGuoInput').value + 8;
        }
    }

    // 9
    if (event.keyCode == 105) {
        if (document.getElementById('jieGuoInput').value == 0) {
            document.getElementById('jieGuoInput').value = 9;
        } else {
            document.getElementById('jieGuoInput').value = document.getElementById('jieGuoInput').value + 9;
        }
    }

    // 0
    if (event.keyCode == 96) {
        if (document.getElementById('jieGuoInput').value == 0) {
            document.getElementById('jieGuoInput').value = 0;
        } else {
            document.getElementById('jieGuoInput').value = document.getElementById('jieGuoInput').value + 0;
        }
    }

    // 删除
    if (event.keyCode == 8) {
        inputValue = document.getElementById('jieGuoInput').value;
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-04-14，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript