时间戳

首页 > 解决方案 > 如何在屏幕上显示键盘

javascript - 如何在屏幕上显示键盘

问题描述

我有这个，

<!-- <script src="/index.js"></script> -->
    <div class="Boxen">
       <textz id="1">1</textz>
       <textz id="2">2</textz>
       <textz id="3">3</textz>
       <textz id="4">4</textz>
       <textz id="5">5</textz>
       <textz id="6">6</textz>
       <textz id="7">7</textz>
       <textz id="8">8</textz>
       <textz id="Q">Q</textz>
      <textz id="e">E</textz>
      <textz id="x">X</textz>
      <textz id="r">R</textz>
      <textz id="c">C</textz>
      <textz id="entr" style="width:70px">Enter</textz>
      <textz id="esc" style="width:70px">ESC</textz>
      <textz style="background:transparent;"></textz>
      <textz style="background:transparent;"></textz>
      <textz style="background:transparent;"></textz>
      <textz style="background:transparent;"></textz>
      <textz style="background:transparent;"></textz>
      <textz id="w">W</textz>
      <textz style="background:transparent;"></textz>
      <textz style="background:transparent;"></textz>
      <textz style="background:transparent;"></textz>
      <textz style="background:transparent;"></textz>
      <textz style="background:transparent;"></textz>
      <textz style="background:transparent;"></textz>
      <textz style="background:transparent;"></textz>
      <textz id="a">A</textz><textz id="s">S</textz><textz id="d">D</textz>
      <textz id="space" style="width:97%;">Space</textz>
</div>
<style>
.Boxen {
  top:1px;
  left:1px;
    width: 30%;
    background: rgb(0,0,0,.4);
    overflow-y: auto;
  position:absolute;
  z-index:1000;
}

.Boxen > textz {
    width: 35px;
    height: 35px;
    float: left;
    background: rgb(0,0,0,.5);
    margin: 5px;
    line-height: 35px;
    text-align: center;
    color:black;
}
</style>
<script>
document.onkeydown = checkKey;
document.onkeyup = checkKey2;

function checkKey(e) {

  if (e.keyCode == 49) {
    document.getElementById("1").style.background = "white"; 
  } else if (e.keyCode == 50) {
    document.getElementById("2").style.background = "white";
  } 
  else if (e.keyCode == 51) {
    document.getElementById("3").style.background = "white";
  } 
  else if (e.keyCode == 52) {
    document.getElementById("4").style.background = "white";
  } 
  else if (e.keyCode == 53) {
    document.getElementById("5").style.background = "white";
  } 
    else if (e.keyCode == 54) {
    document.getElementById("6").style.background = "white";
  } 
    else if (e.keyCode == 55) {
    document.getElementById("7").style.background = "white";
  } 
    else if (e.keyCode == 56) {
    document.getElementById("8").style.background = "white";
  } 
      else if (e.keyCode == 81) {
    document.getElementById("Q").style.background = "white";
  } 
        else if (e.keyCode == 87) {
    document.getElementById("w").style.background = "white";
  } 
        else if (e.keyCode == 65) {
    document.getElementById("a").style.background = "white";
  } 
        else if (e.keyCode == 83) {
    document.getElementById("s").style.background = "white";
  } 
        else if (e.keyCode == 68) {
    document.getElementById("d").style.background = "white";
  } 
          else if (e.keyCode == 69) {
    document.getElementById("e").style.background = "white";
  } 
          else if (e.keyCode == 88) {
    document.getElementById("x").style.background = "white";
  } 
          else if (e.keyCode == 82) {
    document.getElementById("r").style.background = "white";
  } 
          else if (e.keyCode == 67) {
    document.getElementById("c").style.background = "white";
  } 
          else if (e.keyCode == 13) {
    document.getElementById("entr").style.background = "white";
  } 
          else if (e.keyCode == 27) {
    document.getElementById("esc").style.background = "white";
  } 
          else if (e.keyCode == 32) {
    document.getElementById("space").style.background = "white";
  } 
}
function checkKey2(e) {

  if (e.keyCode == 49) {
    document.getElementById("1").style.background = "rgb(0,0,0,.5)"; 
  } else if (e.keyCode == 50) {
    document.getElementById("2").style.background = "rgb(0,0,0,.5)";
  } 
  else if (e.keyCode == 51) {
    document.getElementById("3").style.background = "rgb(0,0,0,.5)";
  } 
  else if (e.keyCode == 52) {
    document.getElementById("4").style.background = "rgb(0,0,0,.5)";
  } 
  else if (e.keyCode == 53) {
    document.getElementById("5").style.background = "rgb(0,0,0,.5)";
  } 
    else if (e.keyCode == 54) {
    document.getElementById("6").style.background = "rgb(0,0,0,.5)";
  } 
    else if (e.keyCode == 55) {
    document.getElementById("7").style.background = "rgb(0,0,0,.5)";
  } 
    else if (e.keyCode == 56) {
    document.getElementById("8").style.background = "rgb(0,0,0,.5)";
  } 
      else if (e.keyCode == 81) {
    document.getElementById("Q").style.background = "rgb(0,0,0,.5)";
  } 
        else if (e.keyCode == 87) {
    document.getElementById("w").style.background = "rgb(0,0,0,.5)";
  } 
        else if (e.keyCode == 65) {
    document.getElementById("a").style.background = "rgb(0,0,0,.5)";
  } 
        else if (e.keyCode == 83) {
    document.getElementById("s").style.background = "rgb(0,0,0,.5)";
  } 
        else if (e.keyCode == 68) {
    document.getElementById("d").style.background = "rgb(0,0,0,.5)";
  } 
          else if (e.keyCode == 69) {
    document.getElementById("e").style.background = "rgb(0,0,0,.5)";
  } 
          else if (e.keyCode == 88) {
    document.getElementById("x").style.background = "rgb(0,0,0,.5)";
  } 
          else if (e.keyCode == 82) {
    document.getElementById("r").style.background = "rgb(0,0,0,.5)";
  } 
          else if (e.keyCode == 67) {
    document.getElementById("c").style.background = "rgb(0,0,0,.5)";
  } 
          else if (e.keyCode == 13) {
    document.getElementById("entr").style.background = "rgb(0,0,0,.5)";
  } 
          else if (e.keyCode == 27) {
    document.getElementById("esc").style.background = "rgb(0,0,0,.5)";
  } 
          else if (e.keyCode == 32) {
    document.getElementById("space").style.background = "rgb(0,0,0,.5)";
  } 
}
</script>

它本身就可以工作，但是当我将它粘贴到 moomoo.io（使用Ctrl+ Shift+ I）时，它就不再工作了，这是一个简单的“键盘”，它显示了我按下哪些键来向 YouTube 上的人展示。例如，我不是黑客或作弊。我只想让它在我添加代码的任何网站上工作，谢谢。（按片段，然后点击1, 2, 3）

标签： javascripthtml

解决方案

不是您要求的，但我简化了您的 javascript 代码。我将您所有的关键代码添加到一个数组中，然后简单地进行查找。

如果您想将其注入 Moo Moo：

  • 在 moomoo.io 上打开开发者工具 (F12)。
  • 复制 HTML 代码，包括style标记（下面的第二个灰色框）。
  • 在 Inspector 选项卡中：滚动到页面底部：
  • Firefox：右键单击<div id="onetrust-consent-sdk">并选择Paste / InnerHTML。
  • Chrome：右键单击<div id="onetrust-consent-sdk">并选择Edit HTML。粘贴 HTML 代码并单击 HTML 代码之外的某个位置。
  • 键盘现在应该在左上角弹出。现在是时候绑定一些功能了。
  • 单击控制台选项卡。
  • 复制 javascript 代码（下面的第一个框）。将其粘贴到页面底部的输入中。

这将为您设置一个键盘的工作图形表示。

控制台说明

var keys = [];
keys[13] = 'entr';
keys[27] = 'esc';
keys[32] = 'space';
keys[49] = 1;
keys[50] = 2;
keys[51] = 3;
keys[52] = 4;
keys[53] = 5;
keys[54] = 6;
keys[55] = 7;
keys[56] = 8;
keys[65] = 'a';
keys[67] = 'c';
keys[68] = 'd';
keys[69] = 'e';
keys[81] = 'Q';
keys[87] = 'w';
keys[83] = 's';
keys[88] = 'x';
keys[82] = 'r';

function checkKey(event, background) {
  let keyCode = event.keyCode;

  if (keys[keyCode]) {
    document.getElementById(keys[keyCode]).style.background = background;
  }
}

document.addEventListener('keydown', (event) => checkKey(event, 'white'));
document.addEventListener('keyup',   (event) => checkKey(event, 'rgb(0, 0, 0, .5)'));
<div class="Boxen">
  <textz id="1">1</textz>
  <textz id="2">2</textz>
  <textz id="3">3</textz>
  <textz id="4">4</textz>
  <textz id="5">5</textz>
  <textz id="6">6</textz>
  <textz id="7">7</textz>
  <textz id="8">8</textz>
  <textz id="Q">Q</textz>
  <textz id="e">E</textz>
  <textz id="x">X</textz>
  <textz id="r">R</textz>
  <textz id="c">C</textz>
  <textz id="entr" style="width:70px">Enter</textz>
  <textz id="esc" style="width:70px">ESC</textz>
  <textz style="background:transparent;"></textz>
  <textz style="background:transparent;"></textz>
  <textz style="background:transparent;"></textz>
  <textz style="background:transparent;"></textz>
  <textz style="background:transparent;"></textz>
  <textz id="w">W</textz>
  <textz style="background:transparent;"></textz>
  <textz style="background:transparent;"></textz>
  <textz style="background:transparent;"></textz>
  <textz style="background:transparent;"></textz>
  <textz style="background:transparent;"></textz>
  <textz style="background:transparent;"></textz>
  <textz style="background:transparent;"></textz>
  <textz id="a">A</textz>
  <textz id="s">S</textz>
  <textz id="d">D</textz>
  <textz id="space" style="width:97%;">Space</textz>
</div>
<style>
.Boxen {
  top: 1px;
  left: 1px;
  width: 30%;
  background: rgb(0, 0, 0, .4);
  overflow-y: auto;
  position: absolute;
  z-index: 1000;
}

.Boxen > textz {
  width: 35px;
  height: 35px;
  float: left;
  background: rgb(0, 0, 0, .5);
  margin: 5px;
  line-height: 35px;
  text-align: center;
  color: black;
}
</style>

推荐阅读