键盘测试
<>.keyboard-wrap{position:relative;background:#636363;-webkit-box-shadow:0 1px 5px 0 rgba(0,0,0,.1);box-shadow:0 1px 5px 0 rgba(0,0,0,.1);width:1050px;height:455px;padding:42px 30px 30px 25px}
.key-footer{border-top:1px solid #888686;padding:22px 0;color:#fff}
.status-color{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;line-height:19px;vertical-align:middle;font-size:14px;color:#f9f9f9;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.status-color span{margin:0 23px 0 7px}
.status-color .btn{cursor:pointer}
.status-color .color{display:inline-block;line-height:19px;font-size:12px;width:19px;height:19px;border:1px solid #929292}
.active .key-base-color,.color.active{background:#fff;fill:#fff}
.color.pressed,.color.press,.pressed .key-base-color{background:#111;fill:#111}
.color.never,.never .key-base-color{background:#353535;fill:#353535}
.status-color .color span{position:relative;left:20px;font-size:14px;color:#000}
.voice svg{margin-top:.04rem;margin-right:.1rem}
.voice .volumeup,.voice.on .volumeoff{display:none}
.voice.on .volumeup{display:block}
.key-log{position:relative;width:300px;height:455px;flex-shrink:0;background:#636363;padding:20px;font-size:13px;-webkit-box-shadow:0 1px 5px 0 rgba(0,0,0,.1);box-shadow:0 1px 5px 0 rgba(0,0,0,.1)}
.key-log .item{color:#999;margin:9px 0}
.key-log .item .time{display:inline-block;width:66px}
.key-log .item span{margin:0 7px}
.key-log .item b{font-size:13px;color:#999}
.key-log .btn,.status-color .btn{display:inline-block;text-align:center;padding:0 7px;-webkit-border-radius:4px;border-radius:4px;min-width:32px;height:28px;line-height:27px;background:#353535;border:1px solid #bdbdbd;font-size:14px;color:#efeeee;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.29);box-shadow:0 1px 3px rgba(0,0,0,.29)}
.key-log .item .event{color:#000}
.key-log .info{position:absolute;bottom:20px;left:20px;right:20px;border-top:1px solid #888686;font-size:14px;color:#999}
.key-base-color{fill:#373839;stroke-width:2px}
.key-top-color{fill:#afafaf;stroke-width:2px}
.key-sel-cursor{fill:#333;stroke:none}
.base{fill:#ddd;stroke:#1f1311}
.key-side{fill:rgba(0,0,0,.1)}
#app-root{width:100%}>
由于浏览器API的限制,可能无法测试以下按键和某些快捷键
Menu
简介
每次您在您键盘上按一个键,虚拟键盘上相关联的那个键就会被点亮。
所有按键都按一遍以确保它们全都工作正常。
如果整个虚拟键盘都被点亮(或者至少您在您的实体键盘上按过的所有键),那么 – 太好了 – 这意味着您的键盘通过了测试!
