mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
add touch event
This commit is contained in:
@@ -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>
|
||||
+2
-2
@@ -7,10 +7,10 @@
|
||||
</head>
|
||||
<body>
|
||||
<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 />
|
||||
<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>
|
||||
<script type="text/javascript" src="keyboard.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
+3
-2
@@ -15,7 +15,7 @@
|
||||
var zIndex = options && options.zIndex || 1000;
|
||||
var width = options && options.width || '100%';
|
||||
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 TABLE_ID = options && options.table_id || 'table_0909099';
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
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 + ' 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>';
|
||||
|
||||
//Button
|
||||
@@ -71,6 +71,7 @@
|
||||
}
|
||||
|
||||
this.el.onclick = addEvent;
|
||||
this.el.ontouchstart = addEvent;
|
||||
body.appendChild(this.el);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user