wushenghua/vczero.github.io
1
0
Fork 0
mirror of https://github.com/wu736139669/vczero.github.io.git synced 2026-08-05 06:23:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

add touch event

Browse Source
This commit is contained in:
vczero
2015-04-23 10:41:51 +08:00
parent dfe47463b3
commit 0eef52a3bc
3 changed files with 50 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
num_key/README.md
+45
View File
@@ -0,0 +1,45 @@
模拟数字键盘
----
###一、起由
（1）目前虚拟键盘需要输入小数点，需要切换键盘；
（2）不同设备上存在兼容性。
###二、用法
（1）new KeyBoard(inputElement);
（2）Demo如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模拟数字键盘</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, minimal-ui" />
</head>
<body>
<div>
<input id="text1" style="height:28px;width:98%;outline:none;
border:1px solid #1AB6FF;padding-left:3px;"/>
<br />
<br />
<input id="text2" style="height:28px;width:98%;
outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>
</div>
<script type="text/javascript" src="keyboard.js"></script>
<script type="text/javascript">
(function(){
var input1 = document.getElementById('text1');
var input2 = document.getElementById('text2');
input1.onclick = function(){
new KeyBoard(input1);
};
input2.onclick = function(){
new KeyBoard(input2);
};
})();
</script>
</body>
</html>
num_key/index.html
+2 -2
View File
@@ -7,10 +7,10 @@
</head> </head>
<body> <body>
<div> <div>
<input id="text1" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/> <input id="text1" type="number" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>
<br /> <br />
<br /> <br />
<input id="text2" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/> <input id="text2" type="number" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>
</div> </div>
<script type="text/javascript" src="keyboard.js"></script> <script type="text/javascript" src="keyboard.js"></script>
<script type="text/javascript"> <script type="text/javascript">
num_key/keyboard.js
+3 -2
View File
@@ -15,7 +15,7 @@
var zIndex = options && options.zIndex || 1000; var zIndex = options && options.zIndex || 1000;
var width = options && options.width || '100%'; var width = options && options.width || '100%';
var height = options && options.height || '193px'; var height = options && options.height || '193px';
var fontSize = options && options.fontSize || '12px'; var fontSize = options && options.fontSize || '15px';
var backgroundColor = options && options.backgroundColor || '#fff'; var backgroundColor = options && options.backgroundColor || '#fff';
var TABLE_ID = options && options.table_id || 'table_0909099'; var TABLE_ID = options && options.table_id || 'table_0909099';
@@ -33,7 +33,7 @@
var cssStr = '<style type="text/css">'; var cssStr = '<style type="text/css">';
cssStr += '#' + TABLE_ID + '{text-align:center;width:100%;height:160px;border-top:1px solid #CECDCE;background-color:#FFF;}'; cssStr += '#' + TABLE_ID + '{text-align:center;width:100%;height:160px;border-top:1px solid #CECDCE;background-color:#FFF;}';
cssStr += '#' + TABLE_ID + ' td{width:33%;border:1px solid #ddd;border-right:0;border-top:0;}'; cssStr += '#' + TABLE_ID + ' td{width:33%;border:1px solid #ddd;border-right:0;border-top:0;}';
cssStr += '#' + TABLE_ID + ' td:hover{background-color:#1FB9FF;color:#FFF;}'; // cssStr += '#' + TABLE_ID + ' td:hover{background-color:#1FB9FF;color:#FFF;}';
cssStr += '</style>'; cssStr += '</style>';
//Button //Button
@@ -71,6 +71,7 @@
} }
this.el.onclick = addEvent; this.el.onclick = addEvent;
this.el.ontouchstart = addEvent;
body.appendChild(this.el); body.appendChild(this.el);
} }