一、起因

最近支付的同事说，数字键盘有些问题；在移动设备上有时候比较难出现点(.)和数字在一起的格局；因此，考虑到这种情况，就建议手写个模拟键盘了。花了一晚上的时间，写了个简单的键盘，基本能用。考虑到有的开发者没有使用朱克瑞，就使用原生的射流研究…了。

开源代码库地址：https://github。com/vczero/键盘

二、截图如下

三、体验地址（需要点击投入才能弹出数字键盘的哦)

http://vczero.github.io/num_key/index.html

四、代码比较简单，直接贴了

；(函数(导出){ var KeyBoard=函数(输入，选项){ var body=document。getelementsbytagname(' body ')[0]；var DIV _ ID=选项。divid | | ' _ _ w _ l _ h _ v _ c _ z _ e _ r _ o _ divid '；if(文档。getelementbyid(DIV _ ID)){ body。移除子文档。getelementbyid(DIV _ ID))；} this.input=inputthis。El=文档。创建元素(' div ')；var self=这个；var zIndex=options选项。zIndex | | 1000var width=options选项。宽度| | ' 100% '；var height=options选项。高度| | ' 193 pxvar font size=options选项。字号| | ' 15pxvar backgroundColor=选项选项。options . background COlOr | | ' # fff var TABLE _ ID=options选项。TABLE _ ID | | ' TABLE _ 0909099var mobile=方向类型！=="未定义";这个。埃尔。ID=DIV _ IDthis.el.style.position='绝对；这个。埃尔。风格。left=0；这个。埃尔。风格。右=0；这个。埃尔。风格。底部=0；这个。埃尔。风格。zIndex=zIndex这个。埃尔。风格。宽度=宽度；这个。埃尔。风格。高度=高度；这个。埃尔。风格。background COlOr=背景颜色；//样式var CSSTr=' style type=' text/CSS '；csstr=' # ' TABLE _ ID ' { text-align : center；宽度：100%;高度：160 px边框-top:1px实心# CECDCE背景色： # FFF；}';csstr=' # ' TABLE _ ID ' TD {宽度：33%；border:1px实心# ddd右边框：0;边框-top :0；}';if(！mobile){ cssstr=' # ' TABLE _ ID ' TD :悬停{底色： # 1FB9FF颜色： # FFF；}';} CSSTr="/style "；//Button var btnStr=' div style=' width :60 px；高度：28 px背景-颜色： # 1FB9FF；btnStr=' float:right右边距：5 px文本对齐：居中；color: # fffBTN str='行高：28 px边界半径：3 px边距-底部：5 px光标：指针指针；'完成/div '；//TABLE var tabletr=' TABLE ID=' TABLE _ ID ' '边框='0 '单元格间距='0 '单元格填充=' 0 ';表tr=' TRT D1/TDT D2/TDT D3/TD/tr '；表tr=' TRT D4/TDT D5/TDT D6/TD/tr '；表tr=' TRT D7/TDT D8/TDT D9/TD/tr '；tableStr=' trtd style='底色： # D3D 9df；/TDT 0/TD '；tableStr=' TD style='底色： # D3D 9df；'删除/TD/tr '；tableStr='/table '；这个。埃尔。innerhtml=csstr btnStr tableStr函数addEvent(e){ var ev=e | | window。事件；var click El=ev。元素| | ev。目标；定义变量值=点击El。文字内容| |点击El。内部文本；如果(点击。标记名。tolocalelowercase()===' TD '值！=='删除){ if(self。输入){ self。输入。值=值；} } else if(clickel。标记名。tolocalelowercase()===' div '值==='完成){ body。移除子(自我。El)；} else if(clickel。标记名。tolocalelowercase()===' TD '值==='删除){ var num=self。输入。价值；if(num){ var newNum=num.substr(0，num。长度-1)；自我。输入。value=NewNum} } } if(mobile){ this。埃尔。ontouchstart=AddEvent} else { this。埃尔。onclick=AddEvent}身体。appendchild(这个。El)；}出口键盘=键盘})(窗口);五、简单演示

！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-ui '/head body div input id=' text 1 ' readonly=' readonly ' type=' number ' style=' height :28 px；宽度：98%;outline : none border 33601 px实心# 1AB6FF填充-左侧：3像素；/br/br /输入id=' text 2 ' readonly=' readonly ' type=' number ' style=' height :28 px；宽度：98%;outline : none border 33601 px实心# 1AB6FF填充-左侧：3像素；//div脚本类型=' text/JavaScript ' src=' http :键盘。js /脚本脚本类型=' text/JavaScript '(function(){ var input 1=document。getelementbyid(' text 1 ')；var输入2=文档。getelementbyid(' text 2 ')；输入1。onclick=function(){ new KeyWork(输入1)；};输入2。onclick=function(){ new KeyWork(输入2)；};})();/脚本/正文/html以上所述就是本文的全部内容了，希望大家能够喜欢。