这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文给大家分享的是使用原生的 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;
- 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>
来源: http://www.phperz.com/article/17/0625/271652.html