如何在触摸设备上为输入域添加虚拟键盘？
一个插件可以解决这个问题，关键还支持高度自定义（git地址）：
GitHub - Mottie/Keyboard: Virtual Keyboard using jQuery ~
官网地址：Virtual Keyboard
使用步骤：
1. 下载相关资源
文件夹如下所示：
2. 修改例子
我的需求相对简单，就是需要一个输入纯数字的键盘，那么我将基于basic文件进行修改。
代码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>虚拟键盘</title>
<!-- 引入jquery -->
<script src="js/jquery-latest.min.js"></script>
<!-- 引入自定义样式 -->
<link href="../css/keyboard1.css" rel="stylesheet">
<!-- 引入键盘 -->
<script src="../js/jquery.keyboard.js"></script>
<script>
$(function(){
$('#keyboard').keyboard({
layout: 'custom', // 自定义布局
usePreview: false,
customLayout: {
'normal' : [
'7 8 9',
'4 5 6',
'1 2 3',
'0 {bksp}'
]
},
autoAccept: true, // 自动输入到input中
language: 'zh', // 中文
display: {
'bksp': '删除' // 需要把对应的按钮设置为中文
},
});
});
</script>
</head>
<body>
<div id="wrap">
<input id="keyboard" type="text">
</div>
</body>
</html>
样式可以自定义，这里不再附上。
具体显示为：
同时支持高度自定义键盘，只需要在 customLayout 定义即可；
比如
customLayout: {
'default' : [
'{rad} {deg} {grad} {sp:.1} {MC} {MR} {MS} {MPLUS} {M-} {a}',
'{meta1} {ln} ( ) {b} {clear} {clearall} {sign} {sqrt} {c}',
'{sinh} {sin} {x2} {n!} 7 8 9 / %',
'{cosh} {cos} {xy} {yroot} 4 5 6 * {invx}',
'{tanh} {tan} {x3} {cuberoot} 1 2 3 - {equals}',
'{pi} {Int} {mod} {log} {10x} 0 {dec} +'
],
'meta1' : [
'{rad} {deg} {grad} {sp:.1} {MC} {MR} {MS} {MPLUS} {M-} {a}',
'{meta1} {ex} ( ) {b} {clear} {clearall} {sign} {sqrt} {c}',
'{asinh} {asin} {x2} {n!} 7 8 9 / %',
'{acosh} {acos} {xy} {yroot} 4 5 6 * {invx}',
'{atanh} {atan} {x3} {cuberoot} 1 2 3 - {equals}',
'{2pi} {Int} {mod} {log} {10x} 0 {dec} +'
]
},更多案例可查看docs文件夹。