依赖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';
}
}
}
}
网友评论