I want to build a VERY SIMPLE terminal emulator in HTML5/Javascript. I use a readonly textarea.
<TextArea readOnly id="screenID" rows="25" cols="80"
style="color: lime; background-color: black"
onkeypress="logKey(event.which||event.keyCode)">
</TextArea>
when a key is pressed the logKey function is called and the keyCode is stored.
<script>
var key = null; //one key buffer. could be extended to a longer buffer
function logKey(ch){key=ch};
var screen = document.getElementById("screenID");
function Tx(ch){screen.innerHTML += ch; screen.scrollTop = screen.scrollHeight};
function Rx() {k=key; key=null; if (k) {return String.fromCharCode(k)} else {return null}};
function demo(){k=Rx(); if (k) {Tx(k)} }; // copy keyboard to screen
Tx("\n");
setInterval(demo, 100)
</script>
Tx(ch) adds a character to the screen. Rx() reads a character from the keyboard.
For demonstration purposes a character is read from the keyboard and send to the screen every 100ms.
This works perfect on PC, but not on a mobile device because no vitual keyboard is shown for a readonly textarea.
A possible solution could be to combine a visible readonly textarea and an invisible one (not readonly) on the same location, but this ruins the simple solution of the PC version. (I want to write the simplest possible code for educational purposes).
Is there a SIMPLE way to force a virtual keyboard to show up ? (Plain JS)