Native JS write a simple numeric keypad (by Vczero)

First, causes

Recently paid colleagues said that there are some problems with the numeric keypad; it is sometimes difficult to spot (.) and number patterns on mobile devices; Therefore, given this situation, it is recommended to hand-write a simulated keyboard. Spent the whole night, wrote a simple keyboard, basically can use. Considering that some developers do not use juqery, they use the native JS.

　　GitHub Address: Https://github.com/vczero/keyboard

Second, the following

Third, experience the address (need to click on input to pop up the numeric keypad OH)

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

Of course you can sweep the QR code:

Third, the code is relatively simple, directly affixed to the

1;(function(exports) {2     varKeyBoard =function(input, options) {3         varBODY = document.getElementsByTagName (' body ') [0];4         vardiv_id = Options && Options.divid | | ' __w_l_h_v_c_z_e_r_o_divid ';5         6         if(document.getElementById (div_id)) {7 Body.removechild (document.getElementById (div_id));8         }9         Ten          This. Input =input; One          This. El = document.createelement (' div '); A          -         varSelf = This; -         varZIndex = Options && Options.zindex | | 1000; the         varwidth = options && Options.width | | ' 100% '; -         varHeight = options && Options.height | | ' 193px '; -         varfontSize = Options && Options.fontsize | | ' 15px '; -         varBackgroundColor = Options && Options.backgroundcolor | | ' #fff '; +         vartable_id = Options && options.table_id | | ' table_0909099 '; -         varMobile =typeofOrientation!== ' undefined '; +          A          This. el.id =div_id; at          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; in          This. El.style.height =height; -          This. El.style.backgroundColor =BackgroundColor; to          +         //style -         varCssstr = ' <style type= ' text/css ' > '; theCssstr + = ' # ' + 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) {Panax NotoginsengCssstr + = ' # ' + table_id + ' td:hover{background-color: #1FB9FF; color: #FFF;} '; -         } theCssstr + = ' </style> '; +          A         //Button the         varBtnstr = ' <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; > Complete </div> '; $          $         //Table -         varTablestr = ' <table id= ' + table_id + ' "border=" 0 "cellspacing=" 0 "cellpadding=" 0 "> '; -Tablestr + = ' <tr><td>1</td><td>2</td><td>3</td></tr> '; theTablestr + = ' <tr><td>4</td><td>5</td><td>6</td></tr> '; -Tablestr + = ' <tr><td>7</td><td>8</td><td>9</td></tr> ';WuyiTablestr + = ' <tr><td style= "Background-color: #D3D9DF;" >.</td><td>0</td> '; theTablestr + = ' <td style= "Background-color: #D3D9DF;" > Delete </td></tr> '; -Tablestr + = ' </table> '; Wu          This. el.innerhtml = cssstr + Btnstr +Tablestr; -          About         functionaddevent (e) { $             varEV = e | |window.event; -             varClickel = Ev.element | |Ev.target; -             varValue = Clickel.textcontent | |Clickel.innertext; -             if(clickEl.tagName.toLocaleLowerCase () = = = ' td ' && value!== ' Delete '){ A                 if(self.input) { +Self.input.value + =value; the                 } -}Else if(clickEl.tagName.toLocaleLowerCase () = = = ' div ' && value = = = "Done"){ $ Body.removechild (self.el); the}Else if(clickEl.tagName.toLocaleLowerCase () = = = ' td ' && value = = = "Delete"){ the                 varnum =Self.input.value; the                 if(num) { the                     varNewnum = num.substr (0, Num.length-1); -Self.input.value =Newnum; in                 } the             } the         } About          the         if(MOBILE) { the              This. El.ontouchstart =addevent; the}Else{ +              This. El.onclick =addevent; -         } theBody.appendchild ( This. EL);Bayi     } the      theExports. KeyBoard =KeyBoard; -  -}) (window);

Four, simple demo

1<! DOCTYPE html>234<meta charset= "Utf-8"/>5<title> Analog Numeric Keypad </title>6<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, Minimal-ui "/>78<body>9<div>Ten<input id= "Text1" readonly= "readonly" type= "number" style= "height:28px;width:98%;outline:none;border:1px solid # 1ab6ff;padding-left:3px; " /> One<br/> A<br/> -<input id= "Text2" readonly= "readonly" type= "number" style= "height:28px;width:98%;outline:none;border:1px solid # 1ab6ff;padding-left:3px; " /> -</div> the<script type= "Text/javascript" src= "Keyboard.js" ></script> -<script type= "Text/javascript" > -(function(){ -             varINPUT1 = document.getElementById (' Text1 ')); +             varInput2 = document.getElementById (' Text2 ')); -              +Input1.onclick =function(){ A                 NewKeyBoard (INPUT1); at             }; -              -Input2.onclick =function(){ -                 NewKeyBoard (INPUT2); -             }; -              in              -         })(); to</script> +</body> -
Native JS write a simple numeric keypad (by Vczero)