A Pen by Torbjorn Lindholm on CodePen.
Created
January 24, 2020 17:27
-
-
Save UnforeseenOcean/5d7b98d65ba72d2475f50b7af2f5b136 to your computer and use it in GitHub Desktop.
YzPgpqZ
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment