模拟键盘

因为刚更了键盘事件的内容，想到之前写的屏幕上的模拟键盘，就想发出来，，，可能写的不是很好，代码行还多，键盘上的字母字符也都不是动态生成，但是确实功能基本都能实现

html部分

<div id="all">
    <input type="text" id="text1"><br>
    <div>`</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>0</div>
    <div>-</div>
    <div>=</div>
    <div>delete</div><br>
    <div>q</div>
    <div>w</div>
    <div>e</div>
    <div>r</div>
    <div>t</div>
    <div>y</div>
    <div>u</div>
    <div>i</div>
    <div>o</div>
    <div>p</div>
    <div>[</div>
    <div>]</div><br>
    <div>caps</div>
    <div>a</div>
    <div>s</div>
    <div>d</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
    <div>j</div>
    <div>k</div>
    <div>l</div>
    <div>;</div>
    <div>'</div>
    <div>\</div><br>
    <div>shift</div>
    <div>z</div>
    <div>x</div>
    <div>c</div>
    <div>v</div>
    <div>b</div>
    <div>n</div>
    <div>m</div>
    <div>,</div>
    <div>.</div>
    <div>/</div>
</div>

css部分

body{
    background-color: darkslategrey;
}
#all{
    margin: 100px auto;
    text-align: center;
}
#text1{
    width:500px;
    height:40px;
    border-radius: 4px;
    margin-bottom: 20px;
}
#all div{
    color: #cccccc;
    display: inline-block;
    border:1px solid #cccccc;
    padding:15px;
    margin: 3px;
    border-radius: 5px;
    font-size:20px;
}

js部分(内容比较多)

var oText = document.getElementById("text1");
var aDiv = $("all").getElementsByTagName("div");
var arr1 = ["~","!","@","#","$","%","^","&","*","(",")","_","+"];
var arr2 = ["`","1","2","3","4","5","6","7","8","9","0","-","="];
var arr3 = ["{","}",":","\"","|","<",">","?"];
var arr4 = ["[","]",";","'","\\",",",".","/"];
var cnt = 0;
var b = true;
var c = true;
function fn1(){   //变成键盘上排字符和大写字母
    aDiv[26].style.backgroundColor = "#333333";
    for(var i=14;i<26;i++){
        if(i<24){
            aDiv[i].innerHTML = aDiv[i].innerHTML.toUpperCase();
        }else{
            aDiv[i].innerHTML = arr3[cnt++];
        }
    }
    for(var i=27;i<39;i++){
        if(i<36){
            aDiv[i].innerHTML = aDiv[i].innerHTML.toUpperCase();
        }else{
            aDiv[i].innerHTML = arr3[cnt++];
        }
    }
    for(var i=40;i<50;i++){
        if(i<47){
            aDiv[i].innerHTML = aDiv[i].innerHTML.toUpperCase();
        }else{
            aDiv[i].innerHTML = arr3[cnt++];
        }
    }
    cnt=0;
}   
function fn2() {   //变成键盘下排字符和小写字母
    aDiv[26].style.backgroundColor = "darkslategrey";
    for(var i=14;i<26;i++){
        if(i<24){
            aDiv[i].innerHTML = aDiv[i].innerHTML.toLowerCase();
        }else{
            aDiv[i].innerHTML = arr4[cnt++];
        }
    }
    for(var i=27;i<39;i++){
        if(i<36){
            aDiv[i].innerHTML = aDiv[i].innerHTML.toLowerCase();
        }else{
            aDiv[i].innerHTML = arr4[cnt++];
        }
    }
    for(var i=40;i<50;i++){
        if(i<47){
            aDiv[i].innerHTML = aDiv[i].innerHTML.toLowerCase();
        }else{
            aDiv[i].innerHTML = arr4[cnt++];
        }
    }
    cnt=0;
}   
for(var i=0;i<aDiv.length;i++) {   //输入字符部分
    aDiv[i].index = i;
    if (i != 13 && i != 26 && i != 39) {
        aDiv[i].onclick = function () {
            if (aDiv[this.index].innerHTML == "&amp;") {
                oText.value += "&";
            }else if(aDiv[this.index].innerHTML == "&lt;"){
                oText.value += "<";
            }else if(aDiv[this.index].innerHTML == "&gt;"){
                oText.value += ">";
            }else{
                oText.value += aDiv[this.index].innerHTML;
            }
        }
    }
} 
aDiv[39].onclick = function(){  //shift键点击事件
    if(b){
        c = true;
        this.style.backgroundColor = "#333333";
        fn1();
        for(var i=0;i<13;i++){
            aDiv[i].innerHTML = arr1[i];
        }
    }else{
        c = false;
        this.style.backgroundColor = "darkslategrey";
        fn2();
        for(var i=0;i<13;i++){
            aDiv[i].innerHTML = arr2[i];
        }
    }
    b = !b;
}   
aDiv[26].onclick = function(){   //caps键点击事件
    if(b) {
        if (c) {
            fn2();
        } else {
            fn1();
        }
    }
    c = !c;
}  
aDiv[13].onclick = function(){    //delete点击事件
    oText.value = oText.value.substring(0,oText.value.length-1);
};