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

来源: 电脑维修教程 阅读:     发表时间:

本文给各人分享的是使用原生的javascript实现简单的数字键盘的小例子,代码非常的简单,有需要的小伙伴参考下吧。 一、起因 最近支付的同事说,数字键

本文给各人分享的是使用原生的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 = '';

//button

var btnstr = '

btnstr += 'float:right;margin-right:5px;text-align:center;color:#fff;';

btnstr += 'line-height:28px;border-radius:3px;margin-bottom:5px;cursor:pointer;">完成

';

//table

var tablestr = '<table width='95%' border='1' align='center' cellpadding='4' cellspacing='0' bordercolor='#D7D7D7' ><tr><td align='center'>';

tablestr += '</td></tr><tr><td align='center'>1</td><td align='center'>2</td><td align='center'>3</td></tr><tr><td align='center'>';

tablestr += '</td></tr><tr><td align='center'>4</td><td align='center'>5</td><td align='center'>6</td></tr><tr><td align='center'>';

tablestr += '</td></tr><tr><td align='center'>7</td><td align='center'>8</td><td align='center'>9</td></tr><tr><td align='center'>';

tablestr += '</td></tr><tr><td align='center'>.</td><td align='center'>0

';

tablestr += '</td><td align='center'>删除</td></tr><tr><td align='center'>';

tablestr += '</td></tr></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

以上所述就是本文的全部内容了,但愿各人能够喜欢。

以上是:解决原生js制作简单的数字键盘问题的详细资料教程