Digital keypad (Pure JS)

Requirements to achieve:

1. The first digit cannot be 0.
2. Cannot appear at the same time two "."
3. The last one can't be "."
4. Only n decimal places can be entered

Note: in iOS, input will appear the cursor, you can add unselectable= "on" onfocus= "This.blur ()" can be resolved;

Html:

<input id= "Text1" readonly= "readonly" unselectable= "on" onfocus= "This.blur ()" type= "text" style= "HEIGHT:28PX; width:98%;outline:none;border:1px solid #1AB6FF;p adding-left:3px; " />

Js:

var input1 = document.getElementById (' Text1 ');
Input1.onclick = function () {

New KeyBoard (input1,2);
};

The last citation below the JS file can be

(function (Exports) {var KeyBoard = function (input,n,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 = this;var zIndex = options && Options.zindex | | 1000;var width = options && Options.width | | ' 100% ';var height = options && Options.height | | ' 250px ';var paddingtop = options && Options.paddingtop | | ' 5px ';var paddingbottom = options && Options.paddingbottom | | ' 5px ';var fontSize = options && Options.fontsize | | ' 15px ';var border = options && Options.bordertop | | ' Solid 1px #ccc; ';var backgroundcolor = options && Options.backgroundcolor | | ' #dddddd ';var table_id = options && options.table_id | | ' table_0909099 ';var mobile = typeof orientation!== ' undefined ';This.el.id = div_id;this.el.style.position = ' fixed ';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.borderTop = border;This.el.style.backgroundColor = BackgroundColor;Stylevar cssstr = ' <style type= ' text/css ' > ';Use CSS to control whether the keyboard is displayedCssstr + = '. Nfs-keyboard-header{height:50px;background-color: #eee; Font-size:18px;color: #888;} ';Cssstr + = '. Nfs-keyboard-body{height:200px;background-color: #eee;} ';Cssstr + = '. Opacityout{display:none} ';Cssstr + = '. A-bounceinb{bottom:0;border:0;-webkit-animation:bounceinb 0.3s ease-in backwards;-moz-animation: Bounceinb 0.3s ease-in backwards;-ms-animation:bounceinb 0.3s ease-in backwards;animation:bounceinb 0.3s ease-in backwards;} ';Cssstr + = '. A-bounceoutb{bottom:-250px;border:0;padding:0;-webkit-animation:bounceoutb 0.3s ease-out backwards;- Moz-animation:bounceoutb 0.3s ease-out backwards;-ms-animation:bounceoutb 0.3s ease-out backwards;animation: Bounceoutb 0.3s ease-out backwards;} ';Cssstr + = ' @-webkit-keyframes Bounceoutb{0%{opacity:1;-webkit-transform:translatey ( -250px);} 100%{opacity:0;-webkit-transform:translatey (0);} ';Cssstr + = ' @-moz-keyframes Bounceoutb{0%{opacity:1;-webkit-transform:translatey ( -250px);} 100%{opacity:0;-webkit-transform:translatey (0);} ';Cssstr + = ' @-ms-keyframes Bounceoutb{0%{opacity:1;-webkit-transform:translatey ( -250px);} 100%{opacity:0;-webkit-transform:translatey (0);} ';Cssstr + = ' @keyframes Bounceoutb{0%{opacity:1;-webkit-transform:translatey ( -250px);} 100%{opacity:0;-webkit-transform:translatey (0);} ';Cssstr + = ' @-webkit-keyframes Bounceinb{0%{opacity:0;-webkit-transform:translatey (250px);} 100%{opacity:1;-webkit-transform:translatey (0);} ';Cssstr + = ' @-moz-keyframes Bounceinb{0%{opacity:0;-webkit-transform:translatey (250px);} 100%{opacity:1;-webkit-transform:translatey (0);} ';Cssstr + = ' @-ms-keyframes Bounceinb{0%{opacity:0;-webkit-transform:translatey (250px);} 100%{opacity:1;-webkit-transform:translatey (0);} ';Cssstr + = ' @keyframes Bounceinb{0%{opacity:0;-webkit-transform:translatey (250px);} 100%{opacity:1;-webkit-transform:translatey (0);} ';Table StyleCssstr + = ' # ' + table_id + ' {font-size:18px;text-align:center;width:100%;height:200px;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> ';Backgroundvar back = ' <div id= ' background "style=" position:fixed;z-index:-1001;top:0;right:0;bottom:0;left:0; Background-color:rgba (0,0,0,.3); font-size:0; " >123</div> 'Nfs-keyboard-headervar header = ' <div class= ' nfs-keyboard-header ' > ';Buttonvar btncompletestr = ' <div style= ' width:15%;height:32px;background-color: #1FB9FF; ';Btncompletestr + = ' float:right;margin-right:2%;text-align:center;color: #fff; ';Btncompletestr + = ' line-height:32px;font-size:14px;border-radius:3px;margin-top:8px; Cursor:pointer; " > Complete </div> ';Buttonvar btncancelstr = ' <div style= ' width:15%;height:32px;background-color: #D3D9DF; ';Btncancelstr + = ' float:left;margin-left:2%;text-align:center;color: #000; ';Btncancelstr + = ' line-height:32px;font-size:14px;border-radius:3px;margin-top:8px;cursor:pointer; > Cancel </div> ';Inputvar inputstr = ' <input type= ' text "id=" _input "value=" "readonly=" readonly "placeholder=" "unselectable=" on "onfocus= "This.blur ()";Inputstr + = ' style= ' width:50%;height:28px;float:left;margin-left:8%; ';Inputstr + = ' Text-align:right;color: #000; border:1px solid #ccc; ';Inputstr + = ' line-height:28px;margin-top:10px;font-size:18px; ><div style= "Clear:both" ></div></div> ";Nfs-keyboard-bodyTablevar tablestr = ' <div class= ' nfs-keyboard-body ' > ';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 + = ' &LT;TR&GT;&LT;TD style= "Background-color: #D3D9DF;" >.</td><td>0</td> ';Tablestr + = ' &LT;TD style= "Background-color: #D3D9DF;" > Delete </td></tr> ';Tablestr + = ' </table> ';Tablestr + = ' </div> ';Rendering of HTMLThis.el.innerHTML = cssstr + back + header + btncompletestr + btncancelstr + inputstr + tablestr;Control the formatting in the input boxfunction Clearnonum (obj) {Obj.value = Obj.value.replace (/[^\d.) /g, ""); Clear the numbers and. Characters outside ofObj.value = Obj.value.replace (/^\./g, ""); Verify that the first character is a number instead of a.Obj.value = Obj.value.replace (/\.{ 2,}/g, "."); Keep only the first one. Clear the superfluous.Obj.value = Obj.value.replace (".", "$#$"). Replace (/\./g, ""). Replace ("$#$", ".");if (Obj.value.indexOf (".") < 0 && Obj.value! = "") {//above has been filtered, this control is if there is no decimal point, the first cannot be similar to the amount of 01, 02Obj.value= parsefloat (Obj.value);}if (Obj.value.indexOf (".") >= 0) {//Determine if there is a decimal pointif (Obj.value.split (".") [1].length > N) {//control can only enter 2 digits after the decimal pointObj.value = obj.value.substr (0, obj.value.length-1);}}}function Addevent (e) {var ev = e | | window.event;var _input = document.getElementById ("_input");var Clickel = Ev.element | | Ev.target;var value = Clickel.textcontent | | Clickel.innertext;if (clickEl.tagName.toLocaleLowerCase () = = = ' td ' && value!== ' delete ') {if (input) {if (clickEl.tagName.toLocaleLowerCase () = = = ' td ' && value = = = ".") {if (n <= 0) {_input.value = _input.value;}else{_input.value + = value;Clearnonum (_input);}}else{_input.value + = value;Clearnonum (_input);}}} else if (clickEl.tagName.toLocaleLowerCase () = = = ' div ' && value = = = "Done") {Self.input.value = _input.value.replace (/\.$/g, "");//The last one cannot be '. ';self.el.classList = ' A-bounceoutb ';document.getElementById ("Background"). Classlist = ' opacityout ';} else if (clickEl.tagName.toLocaleLowerCase () = = = ' div ' && value = = = ' Cancel ' | | value = = = "123") {self.el.classList = ' A-bounceoutb ';document.getElementById ("Background"). Classlist = ' opacityout ';} else if (clickEl.tagName.toLocaleLowerCase () = = = ' td ' && value = = = "Delete") {var num = _input.value;if (num) {var newnum = num.substr (0, num.length-1);_input.value = Newnum;}}}if (mobile) {This.el.ontouchstart = addevent;} else {This.el.onclick = addevent;}Body.appendchild (This.el);this.el.classList = ' a-bounceinb ';}Exports. KeyBoard = KeyBoard;}) (window);

Digital keypad (Pure JS)