I have a simulated keyboard in html. There are buttons forming a keyboard on the screen. When they are clicked the character assigned to that button is appended to a text element on the screen. Using the actual irl keyboard is possible too, working in the same manner.
The problem is that when I click an onscreen button and then press the irl spacebar or enter buttons, that onscreen button character is repeated after the space or enter. This happens with space and enter only, and only with the irl keyboard press. When the virtual space is clicked on the screen it works as it should. For example:
-
I click the a key on screen
output:a
-
I press the irl keyboard spacebar
output:a a
-
I press the irl keyboard enter button
output:a a
a
I started with the irl keyboard and the html keyboard using different functions so I thought that might be the issue. I tried combinging them into one and the same issue persists. I added a paraemeter to the function that tells where the function is called from and strangley when I press the irl spacebar it shows that the extranious character is being called from the html button’s onclick. I feel like I’m missing something obvious or I’ve found a weird bug.
The HTML, please excuse any immature identifiers:
<body>
<div class="poop" >
<div class="myDiv" >
<div id = "bh" class="behind-text"></div>
<img class="typewriter-top" src="typewriter-top.png" id="typewriter-top">
<div id="letter" class="text">
<span class="inner-text" id="text"></span>
</div>
<img class="typewriter-bottom" src="typewriter-bottom.png" alt="typewriter-bottom">
<img class="typewriter-bar" id="bar" src="typewriter-bar.png" alt="typewriter-bar">
<button class="enter-container" id="Enter" onclick="typeHit(this.id,'click')"></button>
<div class="outer">
<div class="line-zero">
<button class="button small" id="1" onclick="typeHit(this.id,'click')">1</button>
<button class="button small" id="2" onclick="typeHit(this.id,'click')">2</button>
<button class="button small" id="3" onclick="typeHit(this.id,'click')">3</button>
<button class="button small" id="4" onclick="typeHit(this.id,'click')">4</button>
<button class="button small" id="5" onclick="typeHit(this.id,'click')">5</button>
<button class="button small" id="6" onclick="typeHit(this.id,'click')">6</button>
<button class="button small" id="7" onclick="typeHit(this.id,'click')">7</button>
<button class="button small" id="8" onclick="typeHit(this.id,'click')">8</button>
<button class="button small" id="9" onclick="typeHit(this.id,'click')">9</button>
<button class="button small" id="0" onclick="typeHit(this.id,'click')">0</button>
</div>
<button class="parenthesis-button" id="(" onclick="typeHit(this.id,'click')">( )</button>
<div class="line-one">
<button class="l1b" id="Q" onclick="typeHit(this.id,'click')">Q</button>
<button class="l1b" id="W" onclick="typeHit(this.id,'click')">W</button>
<button class="l1b" id="E" onclick="typeHit(this.id,'click')">E</button>
<button class="l1b" id="R" onclick="typeHit(this.id,'click')">R</button>
<button class="l1b" id="T" onclick="typeHit(this.id,'click')">T</button>
<button class="l1b" id="Y" onclick="typeHit(this.id,'click')">Y</button>
<button class="l1b" id="U" onclick="typeHit(this.id,'click')">U</button>
<button class="l1b" id="I" onclick="typeHit(this.id,'click')">I</button>
<button class="l1b" id="O" onclick="typeHit(this.id,'click')">O</button>
<button class="l1b" id="P" onclick="typeHit(this.id,'click')">P</button>
<button class="l1b" id="-" onclick="typeHit(this.id,'click')" style="font-size: 15px; font-weight: bold;">- _</button>
</div>
<div class="line-two">
<button id="A" onclick="typeHit(this.id,'click')">A</button>
<button id="S" onclick="typeHit(this.id,'click')">S</button>
<button id="D" onclick="typeHit(this.id,'click')">D</button>
<button id="F" onclick="typeHit(this.id,'click')">F</button>
<button id="G" onclick="typeHit(this.id,'click')">G</button>
<button id="H" onclick="typeHit(this.id,'click')">H</button>
<button id="J" onclick="typeHit(this.id,'click')">J</button>
<button id="K" onclick="typeHit(this.id,'click')">K</button>
<button id="L" onclick="typeHit(this.id,'click')">L</button>
<button class="double-button" id=";" onclick="typeHit(this.id,'click')" style="font-size: 15px; font-weight: bold;">; :</button>
<button class="double-button" id="'" onclick="typeHit(this.id,'click')" style="font-size: 15px; font-weight: bold;"><br />' "</button>
</div>
<div class="line-three">
<button class="button shift" id="shift" onclick="shifter()" style="text-shadow: 0px 0px 1px black;font-size: 8px;">SHFT</button>
<button id="Z" onclick="typeHit(this.id,'click')">Z</button>
<button id="X" onclick="typeHit(this.id,'click')">X</button>
<button id="C" onclick="typeHit(this.id,'click')">C</button>
<button id="V" onclick="typeHit(this.id,'click')">V</button>
<button id="B" onclick="typeHit(this.id,'click')">B</button>
<button id="N" onclick="typeHit(this.id,'click')">N</button>
<button id="M" onclick="typeHit(this.id,'click')">M</button>
<button class="double-button" id="," onclick="typeHit(this.id,'click')" style="font-size: px; font-weight: bold;">,</button>
<button class="double-button" id="." onclick="typeHit(this.id,'click')" style="font-size: 15px; font-weight: bold;">.</button>
<button class="double-button" id="?" onclick="typeHit(this.id,'click')" style="font-size: 15px; ">? /</button>
</div>
<button class="right-shift" onclick="shifter()" style="text-shadow: 0px 0px 1px black;font-size: 8px;">SHFT</button>
<div class="line-four">
<button class="button space" id="Space" width="1000px" border-radius="100%" onclick="typeHit(this.id,'click')"></button>
</div>
</div>
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
The Javascript:
window.addEventListener('keypress',function(e) {
console.log("__"+e.key+"___");
typeHit(e.key,'press');
}
);
function typeHit(key,whereYouComeFrom) {
console.log(whereYouComeFrom);
var len = lines[lines.length-1].length;
if(lines.length <= 26) {
if(len == null || len < 49 || (len-49)%51 != 0) {
if(key == "Space") {
hit.play();
hit.currentTime = 0;
// https://www.utf8-chartable.de/unicode-utf8-table.pl?start=128&number=128&utf8=string-literal&unicodeinhtml=hex
lines[lines.length-1] += " ";
document.getElementById('text').textContent = document.getElementById('text').textContent + "xa0";
} else if(key == "Enter") {
returnn.play();
returnn.currentTime = 0;
console.log("*************");
console.log(lines[lines.length-1]);
lines[lines.length] = " ";
console.log(lines[lines.length]);
enter();
} else {
hit.play();
hit.currentTime = 0;
if(shifted == false) {
lines[lines.length-1] += key.toLowerCase();
document.getElementById('text').textContent = document.getElementById('text').textContent + key.toLowerCase();
} else {
let el = '';
if(key == '?') {
el = '/';
} else if(key == '(') {
el = ')';
} else if(key == ';') {
el = ':';
} else if(key == ''') {
el = '"';
} else if(key == '-') {
el = '_';
} else {
el = key;
}
lines[lines.length-1] += el;
document.getElementById('text').textContent = document.getElementById('text').textContent + el;
}
}
let str = document.getElementById('text').textContent;
shift();
} else if(key == "Enter") {
returnn.play();
returnn.currentTime = 0;
lines[lines.length] = "";
enter();
}
}
shifted = false;
}