數字鍵台（純js）

標籤：opacity   define   lsp   content   tar   tab   backward   htm   nbsp   

實現的要求：

1.  第一位不能是0
2. 不能同時出現兩個"."
3. 最後一位不能是"."
4. 只能輸入n位小數

 

注意：在ios中input會出現游標，可以加上 unselectable="on" onfocus="this.blur()" 就可以解決了；

 

html:

 <input id="text1" readonly="readonly" unselectable="on" onfocus="this.blur()"  type="text" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>

js：

var input1 = document.getElementById(‘text1‘);
input1.onclick = function(){

     new KeyBoard(input1,2);
};

最後引文下面的js檔案即可

 

(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 self = 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;//樣式var cssStr = ‘<style type="text/css">‘;// 用css修飾鍵盤是否顯示cssStr += ‘.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樣式cssStr += ‘#‘ + 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;">完成</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;">取消</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-body//tablevar 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 += ‘ <tr><td style="background-color:#D3D9DF;">.</td><td>0</td>‘;tableStr += ‘ <td style="background-color:#D3D9DF;">刪除</td></tr>‘;tableStr += ‘</table>‘;tableStr += ‘</div>‘;//html的渲染this.el.innerHTML = cssStr + back + header + btnCompleteStr + btnCancelStr + inputStr + tableStr;//控制輸入框中的格式function clearNoNum(obj) {obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“數字”和“.”以外的字元obj.value = obj.value.replace(/^\./g, ""); //驗證第一個字元是數字而不是.obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一個. 清除多餘的.obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");if(obj.value.indexOf(".") < 0 && obj.value !=""){//以上已經過濾，此處控制的是如果沒有小數點，首位不能為類似於 01、02的金額        obj.value= parseFloat(obj.value);    }if(obj.value.indexOf(".") >= 0){//判斷是否有小數點if(obj.value.split(".")[1].length > n){//控制只能輸入小數點後2位obj.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 !== "刪除") {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 === "完成") {self.input.value = _input.value.replace(/\.$/g, "");//最後一位不能是‘.‘;self.el.classList = ‘a-bounceoutB‘;document.getElementById("background").classList = ‘opacityOut‘;} else if (clickEl.tagName.toLocaleLowerCase() === ‘div‘ && value === "取消" || value === "123") {self.el.classList = ‘a-bounceoutB‘;document.getElementById("background").classList = ‘opacityOut‘;} else if (clickEl.tagName.toLocaleLowerCase() === ‘td‘ && value === "刪除") {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);

 

數字鍵台（純js）