directory : /web/ : key-codes.html

Directory path . web .
HTML Document File : key-codes.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>keyboards touch or laptop : building customizations</title>
</head>
<body style="background-color: lightgrey;">

<img src="/screens/software/keycodes--Peek%2027-12-2022%2014-00.gif"> <br>

key code alphabet input with case, symbols and backspace, space, enter keys <br>

<!-- use <pre> for spaces and newlines-->
<pre id=textOut style="border: 1px solid black;"></pre> <br>

<script>

document.addEventListener('keypress', function(event) {

    // conversion
    var text = String.fromCharCode(event.keyCode)

    if(event.key == "Enter"){
        // new-line
        text = "\n"
    }

    if(event.key == " "){
        // space
        text = " "

        // space key scrolls page down by default behavior
        event.preventDefault()
    }

    insert(text)

})

document.addEventListener('keydown', function(event) {
    if(event.key=='Backspace') backspace()
})

function insert(text){
    if(window.upperCase) text = text.toUpperCase()

    // add at the end
    textOut.textContent += text
}

// backspace key deletes backwards
function backspace(){
    // remove from the end (no cursor)
    textOut.textContent = textOut.textContent.slice(0,-1)
}

</script>

<p>touch-screen keyboard input<br>
<style>button{ width:60px;height:50px;  font-size:17pt; }</style>
<span id=keyButtons></span>
</p>

<script>
var keyStringEmbedded = "abcdefghijklmnopqrstuvwxyz0123456789+-*/^%,.?!:;_\"`'()[]{}<>=&\\|/@#$~" // '\' and '"' escaped
fetch("key-list.txt").then(res=>res.text()).then(keyString=>setup(keyString)).catch(error=>setup(keyStringEmbedded))

function setup(keyString)
{
window.newLine="\n"
keyButtons.innerHTML += `<button onclick="insert(newLine)">line</button>`
keyButtons.innerHTML += '<button onclick="backspace()">del</button>'
window.upperCase=false; window.caseToggle = function(){ window.upperCase = ! window.upperCase }
keyButtons.innerHTML += '<button onclick="caseToggle()">case</button>'
keyButtons.innerHTML += `<button onclick="insert(' ')">&nbsp;</button>`
///var keyList="abcdefghijklmnopqrstuvwxyz0123456789+-*/^%,.?!:;_\"`'()[]{}<>=&\|/@#$~".split("")
var keyList = keyString.split("")
for(var keyChar of keyList)
    keyButtons.innerHTML += "<button onclick='insert(event.target.textContent)'>"+keyChar+"</button>"
}
</script>

<script src="/web/show-source.js"></script>

</body>
</html>