原生js制作简单的数字键盘_js数字键盘

原生js

数字键盘

412 浏览量更新于2023-05-26 评论收藏 42KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

原生原生js制作简单的数字键盘制作简单的数字键盘

本文给大家分享的是使用原生的javascript实现简单的数字键盘的小例子，代码非常的简单，有需要的小伙伴参

考下吧。

一、起因

　　最近支付的同事说，数字键盘有些问题；在移动设备上有时候比较难出现点（.）和数字在一起的格局；因此，考虑到这

种情况，就建议手写个模拟键盘了。花了一晚上的时间，写了个简单的键盘，基本能用。考虑到有的开发者没有使用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;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38735544

粉丝: 1
资源: 945

会员权益专享

原生js制作简单的数字键盘

评论0

会员权益专享

最新资源

原生js制作简单的数字键盘

评论0

原生JS能模仿键盘输入吗

注册 原生js验证 博客园

原生JS发送异步数据请求

原生js ajax 示例

原生js dom实现todolist

原生js生成二维码的例子?

虚拟dom占内存吗？和原生js谁更占内存

原生js ajax post示例

原生JavaScript现下拉菜单

Dom的diff算法和原生js那个性能高

原生JS实现获取及修改CSS样式的方法

使用原生js封装ajax

如何使用原生JS进行2D画图

原生js预览word文件流

原生JS实现记忆翻牌游戏

原生js（非nodejs）原生js a.js如何使用b.js和c.js的函数,给出代码案例

原生JavaScript实现轮播图

给我写一段原生js事件委托的代码

原生JS使用Canvas实现拖拽式绘图功能

会员权益专享

最新资源

注册原生js验证博客园