CODEWITHSUNDEEP
javascripthtml
user15343564
user15343564

Reputation:

how to display a keyboard on the screen

I have this,

<!-- <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>

It works by itself but when I paste it in to moomoo.io (with Ctrl + Shift + I) it doesn't work any more, this is a simple "keyboard" that shows what keys I press to show the people on YouTube. I'm not hacking or cheating for example. I just want it to work on any website I add the code too, thanks. (press the snippet, and hit 1, 2, 3)

Upvotes: 0

Views: 243

Answers (1)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

Not what you asked for, but I simplified your javascript code. I added all your key codes into an array, and then I simply do a look up.

If you want to inject this into Moo Moo:

  • Open the developer tools (F12) while on moomoo.io.
  • Copy the HTML code, including the style tag (second grey box below).
  • In the Inspector tab: scroll to the bottom of the page:
  • Firefox: Right click on <div id="onetrust-consent-sdk"> and choose Paste / InnerHTML.
  • Chrome: Right click on <div id="onetrust-consent-sdk"> and choose Edit HTML. Paste the HTML code and click somewhere outside the HTML code.
  • The keyboard should now pop up at the top left corner. Now it's time to bind some functionality to it.
  • Click on the Console tab.
  • Copy the javascript code (first box below). Paste it in the input, at the bottom of the page.

That would set you up with a working graphical representation of a keyboard.

Console Explanation

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>

Upvotes: 2

Related Questions