<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Swipe Keyboard</title>
<style>
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.letter {
padding: 10px;
border: 1px solid slateblue;
margin: 20px;
line-height: 70px;
background-color: aquamarine;
}
.letter.disabled {
background-color: gray;
}
.letter:hover {
background-color: slateblue;
}
.u1 {
padding-left: 10px;
padding-right: 10px;
}
.u6 {
margin-left: 300px;
/*yeah I'm not good at CSS*/
padding-left: 60px;
padding-right: 60px;
}
</style>
</head>
<body>
<div id="container">
<h1>Swipe keyboard!</h1>
<p>Click and drag to type, no need to let go!</p>
<p>(Actually, input will be cleared on mousedown)</p>
<textarea disabled name="text" id="text" cols="30" rows="10">
</textarea> <br>
</div>
<script>
// You can modify your keyboard layout by changing this string
let letters = Array.from("QWERTYUIOP\nASDFGHJKL<\nZXCVBNM,.!\n ");
let container = document.getElementById('container');
let write = false; // Keyboard enabled or not
function toggleKeyboard() {
let keys = document.getElementsByClassName("letter");
keys = [].slice.call(keys);
keys.forEach(letter => {
letter.className = write ? letter.className.replace("disabled", "") : letter.className + " disabled";
});
}
const startInput = (element) => {
write = true;
text.value = "";
toggleKeyboard();
};
const endInput = () => {
write = false;
toggleKeyboard();
};
const addLetter = (element) => {
let char = element.srcElement.innerHTML;
if (write)
if (char != "<") // Ah yes this is the backspace key
text.value = text.value + char;
else
text.value = text.value.substring(0, text.value.length - 1);
}
document.onmousedown = startInput;
document.onmouseup = endInput;
letters.forEach(letter => {
if (letter === '\n') {
container.appendChild(document.createElement('br')); //lmao
} else {
let node = document.createElement('span');
node.className = "letter " + (letter == " " ? "u6" : "u1");
node.onmouseenter = addLetter;
node.appendChild(document.createTextNode(letter));
container.appendChild(node);
}
});
let text = document.getElementById('text');
</script>
</body>
</html>