使用JS和CSS3弹性框实现的交互式键盘

JavaScript/Flexbox/SCSS Interactive Keyboard

js, keyboard

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3074
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

let textBox = document.getElementById('enteredText');
let keyboard = document.getElementById('keyboard');
let changeKeys = document.getElementsByClassName('shifter');
let capsLockKey = document.getElementById('20');
let shiftKey = document.getElementById('16');

//Store all the original values of the non-alphabetical keys
var originalShifterArray = [];
for (i = 0; i < changeKeys.length; i++) {
    originalShifterArray.push(changeKeys[i].innerHTML);
}

//Set up an array for the replacement values of the non-alphabetical keys that get subbed in when Shift is pressed
var shifterArray = ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '{', '}', '|', ':', '"', '<', '>', '?'];

//Function that clears the text box
function clearText() {
    textBox.innerHTML = '<br>';
}

//Function that detects keypresses and does the appropriate things
function highlightAndType(e) {
    var keyPressed = e.keyCode;
    var charPressed = e.key;
    const keys = document.getElementById(keyPressed);

keys.classList.add('pressed');
    console.log(charPressed);

//If the user presses CapsLock or Shift, make the alphabetical keys uppercase
    if (charPressed == 'CapsLock' || charPressed == 'Shift') {
        keyboard.classList.add('uppercase');
    }
    //If the user presses Shift, also replace all non-alphabetical keys with their shifted values
    if (charPressed == 'Shift') {
        for (i = 0; i < changeKeys.length; i++) {
            changeKeys[i].innerHTML = shifterArray[i];
        }
    }

//Make sure the key that was typed was a character
    if (e.key.length <= 1) {
        console.log(textBox.innerHTML);
        if (textBox.innerHTML.endsWith('<br>')) {
            var newText = textBox.innerHTML.slice(0, -4);
            textBox.innerHTML = newText;
        }
        textBox.innerHTML += e.key;
        //If a backspace was typed, delete the last character in the textbox. If shift was also held, delete all text.
    } else if (e.key == 'Backspace') {
        if (shiftKey.classList.contains('pressed')) {
            clearText();
        } else {
            var newText = textBox.innerHTML.slice(0, -1);
            textBox.innerHTML = newText;
        }
        //If the Enter key was typed, remove all text from the text box
    } else if (e.key == 'Enter') {
        textBox.innerHTML += '<br><br>';
    }
    //if Tab is pressed, don't tab out of the window. Add extra space to the text box instead
    if (keyPressed == 9) {
        e.preventDefault();
        textBox.innerHTML += '&emsp;&emsp;';
    }
}

//Function that detects when the user lets off a key and does the appropriate things
function removeKeypress(e) {
    var keyDepressed = e.keyCode;
    const keys = document.getElementById(keyDepressed);

keys.classList.remove('pressed');
    //If CapsLock or Shift was just let off, and if the other isn't still on, return keys to lowercase
    if (keyDepressed == 20 && !shiftKey.classList.contains('pressed') || keyDepressed == 16 && !capsLockKey.classList.contains('pressed')) {
        keyboard.classList.remove('uppercase');
    }
    //If Shift was just let off, replace all non-alphabetical keys with their original values rather than their shifted values
    if (keyDepressed == 16) {
        for (i = 0; i < changeKeys.length; i++) {
            changeKeys[i].innerHTML = originalShifterArray[i];
        }
    }
}

//Whenever the user presses a key down, run the proper function
window.addEventListener('keydown', highlightAndType);

//Whenever the user lets a key up, run the proper function
window.addEventListener('keyup', removeKeypress);

//Whenever the window is clicked, run the function to clear out the text box
window.addEventListener('click', clearText);

编译

CSS

* {
    box-sizing: border-box;
}
body {
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    font-family: Quicksand;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}
body #keyboard,
body kbd {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    border-radius: 4px;
    background: #ccc;
    border: 0.2em solid #888b8d;
    text-align: center;
    font-family: Quicksand;
}
body div#text {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 20em;
    height: 44vh;
    max-height: 44vh;
    font-size: 3em;
    margin-bottom: 4vh;
    text-align: center;
    overflow: auto;
    align-self: flex-end;
    position: relative;
}
body #keyboard {
    width: 60em;
    min-width: 60em;
    padding: .4em .4em .8em;
    box-shadow: 0 0.4em 0 #888b8d;
}
body #keyboard kbd {
    line-height: 3.2em;
    width: 3.2em;
    margin: .3em;
    text-align: center;
    color: #fff;
    background-color: #53565a;
    transition: background, position, top, box-shadow .1s;
    box-shadow: 0px 2px 0px #888b8d;
}
body #keyboard kbd.long {
    flex-grow: 2;
    min-width: 4.7em;
}
body #keyboard kbd.longer {
    flex-grow: 3;
    min-width: 9em;
}
body #keyboard kbd.spacebar {
    flex-grow: 12;
    min-width: 9em;
}
body #keyboard .operationKey {
    text-transform: none !important;
}
body #keyboard .pressed {
    background: #ffd100;
    position: relative;
    top: 2px;
    box-shadow: none;
}
body .uppercase {
    text-transform: uppercase;
}
body pre {
    height: 2vh;
    line-height: 2vh;
}
@media (min-width: 768px) {
    body {
        font-size: 10px;
    }
}
@media (min-width: 960px) {
    body {
        font-size: 12px;
    }
}
@media (min-width: 1080px) {
    body {
        font-size: 14px;
    }
}

HTML

<div id="text">
    <div id="enteredText">Click here, then start typing!</div>
</div>
<div class="container">
    <div id="keyboard">
        <kbd class="shifter" id="192">`</kbd>
        <kbd class="shifter" id="49">1</kbd>
        <kbd class="shifter" id="50">2</kbd>
        <kbd class="shifter" id="51">3</kbd>
        <kbd class="shifter" id="52">4</kbd>
        <kbd class="shifter" id="53">5</kbd>
        <kbd class="shifter" id="54">6</kbd>
        <kbd class="shifter" id="55">7</kbd>
        <kbd class="shifter" id="56">8</kbd>
        <kbd class="shifter" id="57">9</kbd>
        <kbd class="shifter" id="48">0</kbd>
        <kbd class="shifter" id="189">-</kbd>
        <kbd class="shifter" id="187">=</kbd>
        <kbd class="long operationKey" id="8">del</kbd>
        <kbd class="long operationKey" id="9">tab</kbd>
        <kbd id="81">q</kbd>
        <kbd id="87">w</kbd>
        <kbd id="69">e</kbd>
        <kbd id="82">r</kbd>
        <kbd id="84">t</kbd>
        <kbd id="89">y</kbd>
        <kbd id="85">u</kbd>
        <kbd id="73">i</kbd>
        <kbd id="79">o</kbd>
        <kbd id="80">p</kbd>
        <kbd class="shifter" id="219">[</kbd>
        <kbd class="shifter" id="221">]</kbd>
        <kbd class="shifter" id="220">\</kbd>
        <kbd class="long operationKey" id="20">caps</kbd>
        <kbd id="65">a</kbd>
        <kbd id="83">s</kbd>
        <kbd id="68">d</kbd>
        <kbd id="70">f</kbd>
        <kbd id="71">g</kbd>
        <kbd id="72">h</kbd>
        <kbd id="74">j</kbd>
        <kbd id="75">k</kbd>
        <kbd id="76">l</kbd>
        <kbd class="shifter" id="186">;</kbd>
        <kbd class="shifter" id="222">'</kbd>
        <kbd class="long operationKey" id="13">return</kbd>
        <kbd class="longer operationKey" id="16">shift</kbd>
        <kbd id="90">z</kbd>
        <kbd id="88">x</kbd>
        <kbd id="67">c</kbd>
        <kbd id="86">v</kbd>
        <kbd id="66">b</kbd>
        <kbd id="78">n</kbd>
        <kbd id="77">m</kbd>
        <kbd class="shifter" id="188">,</kbd>
        <kbd class="shifter" id="190">.</kbd>
        <kbd class="shifter" id="191">/</kbd>
        <kbd class="longer operationKey" id="16">shift</kbd>
        <kbd class="operationKey" id="188">fn</kbd>
        <kbd class="operationKey" id="17">ctrl</kbd>
        <kbd class="operationKey" id="18">opt</kbd>
        <kbd class="long operationKey" id="91">⌘</kbd>
        <kbd class="spacebar operationKey" id="32">&nbsp;</kbd>
        <kbd class="long operationKey" id="91">⌘</kbd>
        <kbd class="operationKey" id="18">opt</kbd>
        <kbd class="operationKey" id="17">ctrl</kbd>
        <kbd class="operationKey" id="188">fn</kbd>
    </div>
</div>
<br><pre style="width: 100%; text-align: center;">Click the screen or type shift + delete to clear all text.</pre>

JavaScript/Flexbox/SCSS Interactive Keyboard

js, keyboard

编辑器支持Emmet

快捷键

JavaScript/Flexbox/SCSS Interactive Keyboard

js, keyboard

使用CSS3弹性框特性构建的键盘平板和USB线（黑色版）

使用JS实现的下拉列表框多选标签控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：