原生js制作简单的数字键盘
一、起因
最近支付的同事说，数字键盘有些问题；在移动设备上有时候比较难出现点（.） 和数字在一起的格局；因此，考虑到这种情况，就建议手写个模拟键盘了。花了一晚上的时间，写了个简单的键盘，基本能用。考虑到有的开发者没有使用juqery,就使用原生的js了。
Github地址：https://github.com/vczero/keyboard
二、截图如下
三、体验地址（需要点击input才能弹出数字键盘的哦）
URL: http://vczero.github.io/num_key/index.html
四、代码比较简单，直接贴了
;(function(exports){
var KeyBoard = function(input, options){
var body = document.getElementsByTagName('body')[0];
var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid';
if(document.getElementById(DIV_ID)){
body.removeChild(document.getElementById(DIV_ID));
}
this.input = input;
this.el = document.createElement('div');
var self = this;
var zIndex = options && options.zIndex || 1000;
var width = options && options.width || '100%';
var height = options && options.height || '193px';
var fontSize = options && options.fontSize || '15px';
var backgroundColor = options && options.backgroundColor || '#fff';
var TABLE_ID = options && options.table_id || 'table_0909099';
var mobile = typeof orientation !== 'undefined';
this.el.id = DIV_ID;
this.el.style.position = 'absolute';
this.el.style.left = 0;
this.el.style.right = 0;
this.el.style.bottom = 0;
this.el.style.zIndex = zIndex;
this.el.style.width = width;
this.el.style.height = height;
this.el.style.backgroundColor = backgroundColor;
//样式
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;}';
if(!mobile){
cssStr += '#' + TABLE_ID + ' td:hover{background-color:#1FB9FF;color:#FFF;}';
}
cssStr += '</style>';
//Button
var btnStr = '<div style="width:60px;height:28px;background-color:#1FB9FF;';
btnStr += 'float:right;margin-right:5px;text-align:center;color:#fff;';
btnStr += 'line-height:28px;border-radius:3px;margin-bottom:5px;cursor:pointer;">完成</div>';
//table
var tableStr = '<table id="' + TABLE_ID + '" border="0" cellspacing="0" cellpadding="0">';
tableStr += '<tr><td>1</td><td>2</td><td>3</td></tr>';
tableStr += '<tr><td>4</td><td>5</td><td>6</td></tr>';
tableStr += '<tr><td>7</td><td>8</td><td>9</td></tr>';
tableStr += '<tr><td style="background-color:#D3D9DF;">.</td><td>0</td>';
tableStr += '<td style="background-color:#D3D9DF;">删除</td></tr>';
tableStr += '</table>';
this.el.innerHTML = cssStr + btnStr + tableStr;
function addEvent(e){
var ev = e || window.event;
var clickEl = ev.element || ev.target;
var value = clickEl.textContent || clickEl.innerText;
if(clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "删除"){
if(self.input){
self.input.value += value;
}
}else if(clickEl.tagName.toLocaleLowerCase() === 'div' && value === "完成"){
body.removeChild(self.el);
}else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "删除"){
var num = self.input.value;
if(num){
var newNum = num.substr(0, num.length - 1);
self.input.value = newNum;
}
}
}
if(mobile){
this.el.ontouchstart = addEvent;
}else{
this.el.onclick = addEvent;
}
body.appendChild(this.el);
}
exports.KeyBoard = KeyBoard;
})(window);
五、简单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" readonly="readonly" type="number" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>
<br />
<br />
<input id="text2" readonly="readonly" 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">
(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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关推荐
-
JavaScript实现的可变动态数字键盘控件方式实例代码
整理文档,搜刮出一个JavaScript实现的可变动态数字键盘控件方式实例代码,稍微整理精简一下做下分享. @sunRainAmazing JavaScript编写和实现的可变动态键盘密码输入控件,可以动态的生产数字键盘并显示,并且可以实现每次点击后密码键盘重新加载,可以手动刷新功能. 第一种方式,点击查看: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
-
原生js制作简单的数字键盘
一.起因 最近支付的同事说,数字键盘有些问题:在移动设备上有时候比较难出现点(.) 和数字在一起的格局:因此,考虑到这种情况,就建议手写个模拟键盘了.花了一晚上的时间,写了个简单的键盘,基本能用.考虑到有的开发者没有使用juqery,就使用原生的js了. Github地址:https://github.com/vczero/keyboard 二.截图如下 三.体验地址(需要点击input才能弹出数字键盘的哦) URL: http://vczero.github.io/num_key/index.
-
利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'
-
vuejs2.0运用原生js实现简单的拖拽元素功能示例
整理文档,搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例,留作笔记. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta
-
原生js实现简单的模态框示例
html部分: <img src="images/8.jpg" alt=""> <button class="btn" id="showMax">显示大图</button> <div id="modalBox" class="modalBox"> <div class="modalBox-matter"> &
-
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top
-
用原生JS实现简单的多选框功能
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="cheakAll" type="checkbox">全选 <div> <
-
原生js实现简单的Ripple按钮实例代码
整理文档,搜刮出一个原生js实现简单的Ripple按钮的代码,稍微整理精简一下做下分享. 效果如图 准备食材(html部分) <ul id="nav"> <li> <a href='#'> <span>首页</span> <span class="circle"></span> </a> </li> <li> <a href='#'>
-
原生JS实现简单的倒计时功能示例
本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr
-
原生JS实现简单的无缝自动轮播效果
最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的.现在记录一下今天复习的原生js无缝轮播吧. 先上一张自拍镇楼,哈哈哈 首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧 <div id="wrap"> <ul id="ul"
-
原生js实现简单的焦点图效果实例
用到一些封装好的运动函数,主要是定时器 效果为图片和图片的描述定时自动更换. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li, p, h3 { padding: 0; margin: 0; list-style: none; } im