极乐门资源网 Design By www.ioogu.com
一、起因
最近支付的同事说,数字键盘有些问题;在移动设备上有时候比较难出现点(.) 和数字在一起的格局;因此,考虑到这种情况,就建议手写个模拟键盘了。花了一晚上的时间,写了个简单的键盘,基本能用。考虑到有的开发者没有使用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="/UploadFiles/2021-04-02/keyboard.js">以上所述就是本文的全部内容了,希望大家能够喜欢。
标签:
原生js,数字键盘
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无原生js制作简单的数字键盘的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2025年01月18日
2025年01月18日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]