自己写的软键盘记录一下

依赖jquery。这个版本有很多的问题，有时间了写出来。

//传入的lable参数是jquery的选择器  比如#id .class 类型是字符串
//inputlocation是软键盘写入值的地方，比如向一个input写入'123'。
//返回值string类型  'closed' 此时软键盘控件会自动退出。
function keyboard(lable, inputLocation) {
    var flag_close = '';

    //写软键盘的界面
    $(lable).append('\
        <div id="container">\
        <div id="number"></div>\
        <div id="firstLine">\
        <div id="0_keyboard" class="focusing">0</div>\
        <div id="1_keyboard">1</div>\
        <div id="2_keyboard">2</div>\
        <div id="3_keyboard">3</div>\
        <div id="4_keyboard">4</div>\
        <div id="backspace_keyboard">重输</div>\
        </div>\
        <div id="secondLine">\
        <div id="5_keyboard">5</div>\
        <div id="6_keyboard">6</div>\
        <div id="7_keyboard">7</div>\
        <div id="8_keyboard">8</div>\
        <div id="9_keyboard">9</div>\
        <div id="ret_keyboard">确定</div>\
        </div>\
        </div>\
    ');

    //软键盘样式
    var focusStyle = {'background-color': '#FF7F24'}; //焦点样式，主要修改背景
    var nonFocusStyle = {'background-color': 'rgb(102,102,102)'}; //非焦点样式
    //其它部分的样式
    $(lable + " #container").css({
        "position": "relative",
        "overflow": "hidden",
        "border": "1px solid black",
        "width": "380px",
        'background-color': 'rgb(50,50,50)',
        'color': '#ffffff'
    });
    $(lable + ' #number').css({
        "margin": "10px",
        "width": "350px",
        "height": "50px",
        "border": "1px solid black",
        "font-size": "30px"
    });
    $(lable + ' #firstLine').css({});
    $(lable + ' #firstLine div').css({
        "display": "inline-block",
        "margin": "5px 5px",
        //"border": "1px solid gray",
        "height": "30px",
        "width": "30px",
        "text-align": "center",
        "line-height": "30px",
        'background-color': 'rgb(102,102,102)'
    });
    $(lable + ' #firstLine #backspace_keyboard').css({"width": "60px"});
    $(lable + ' #secondLine').css({});
    $(lable + ' #secondLine div').css({
        "display": "inline-block",
        "margin": "5px 5px",
        //"border": "1px solid gray",
        "height": "30px",
        "width": "30px",
        "text-align": "center",
        "line-height": "30px",
        'background-color': 'rgb(102,102,102)'
    });
    $(lable + ' #secondLine #ret_keyboard').css({"width": "60px"});
    $(".focusing").css({"background-color": "#FF7F24"});


    //路由表函数  入口 (路由表，当前位置的ID，方向的键盘码)  路由表例如[['0_keyboard','1_keyboard'],['5_keyboard','6_keyboard']],起始位置（默认是（0，0）） ,出口 当前位置 即map对应位置的内容 比如6_keyboard。 类型是字符串   dirKeyFlatMap
    //单选焦点类 入口  （jquery选择器,焦点样式，非焦点样式）    出口 无具体返回值  会改变样式           focus
    //keyDownDeal函数 处理按键对应的业务逻辑
    var keyMap = [['0_keyboard', '1_keyboard', '2_keyboard', '3_keyboard', '4_keyboard', 'backspace_keyboard'],
        ['5_keyboard', '6_keyboard', '7_keyboard', '8_keyboard', '9_keyboard', 'ret_keyboard']];
    var currentKeyPositionId = '0_keyboard';
    window.onkeydown = function (ev) {
        theKeyCode = window.event.keyCode || theKeyCode;
        currentKeyPositionId = dirKeyFlatMap(keyMap, currentKeyPositionId, theKeyCode);
        alert(currentKeyPositionId+'最前面的');
        singleFocus($('#' + currentKeyPositionId), focusStyle, nonFocusStyle);
        alert(currentKeyPositionId+'currentKeyposition前面的');
        flag_close = keyDownDeal(currentKeyPositionId,theKeyCode);
        alert(currentKeyPositionId+'currentKeyposition后面的');
        console.log(flag_close + 'flageclose');
        if(flag_close == 'close'){return 'close'};
    }

    function dirKeyFlatMap(keyMap, currentKeyPositionId, theKeyCode) {
        var positionX = 0, positionY = 0;
        var i;
        var maxX = keyMap[0].length, maxY = keyMap.length;
        for (i = 0; i < maxY; i++) {
            if (-1 != keyMap[i].indexOf(currentKeyPositionId)) {
                positionY = i;
                positionX = keyMap[i].indexOf(currentKeyPositionId);
                break
            }
        }
        switch (theKeyCode) {
            case 37:
                if (positionX - 1 < 0) {
                    break
                } else {
                    positionX--
                }
                ;console.log('positionX' + positionX);
                break;
            case 38:
                if (positionY - 1 < 0) {
                    break
                } else {
                    positionY--
                }
                ;console.log(positionY);
                break;
            case 39:
                if (positionX + 1 > maxX - 1) {
                    break
                } else {
                    positionX++
                }
                ;console.log('positionX' + positionX);
                break;
            case 40:
                if (positionY + 1 > maxY - 1) {
                    break
                } else {
                    positionY++
                }
                ;console.log(positionY);
                break;
            default:
                break;
        }
        return keyMap[positionY][positionX]
    }

    function singleFocus(focusElement, focusstyle, nonfocusstyle) {
        $(".focusing").css(nonfocusstyle);
        $(".focusing").removeClass('focusing');
        focusElement.addClass('focusing');
        $(".focusing").css(focusstyle);
    }

    function keyDownDeal(id,keycode) {
        if (keycode == 13) {
            switch (id) {
                case '0_keyboard':
                    $(inputLocation).val($(inputLocation).val() + '0');
                    break;
                case '1_keyboard':
                    $(inputLocation).val($(inputLocation).val() + '1');
                    break;
                case '2_keyboard':
                    $(inputLocation).val($(inputLocation).val() + '2');
                    break;
                case '3_keyboard':
                    $(inputLocation).val($(inputLocation).val() + '3');
                    break;
                case '4_keyboard':
                    $(inputLocation).val($(inputLocation).val() + '4');
                    break;
                case '5_keyboard':
                    $(inputLocation).val($(inputLocation).val() + '5');
                    break;
                case '6_keyboard':
                    $(inputLocation).val($(inputLocation).val() + '6');
                    break;
                case '7_keyboard':
                    $(inputLocation).val($(inputLocation).val() + '7');
                    break;
                case '8_keyboard':
                    $(inputLocation).val($(inputLocation).val() + '8');
                    break;
                case '9_keyboard':
                    $(inputLocation).val($(inputLocation).val() + '9');
                    break;
                case 'backspace_keyboard':
                    $(inputLocation).empty();
                    break;
                case 'ret_keyboard': //收起小键盘
                    console.log('ret_keyboard');
                    return 'close';
            }
        }
    }
}