数字键盘（纯js）

实现的要求：

  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>‘;

//background

var 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-header

var header = ‘<div class="nfs-keyboard-header">‘;

//Button

var 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>‘;

//Button

var 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>‘;

//input

var 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

//table

var 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);

时间： 2024-10-08 20:48:29

数字键盘（纯js）的相关文章

JS数字键盘

JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; margin: 0; padding: 2px; position: relative; visibility: visible !important; width: 285px; } #numberkeyboard .numbtn { -moz-border-radius: 4px; /* Ge

原生js写个简单的数字键盘（by vczero）

一.起因 最近支付的同事说,数字键盘有些问题:在移动设备上有时候比较难出现点(.) 和数字在一起的格局:因此,考虑到这种情况,就建议手写个模拟键盘了.花了一晚上的时间,写了个简单的键盘,基本能用.考虑到有的开发者没有使用juqery,就使用原生的js了. Github地址:https://github.com/vczero/keyboard 二.截图如下 三.体验地址(需要点击input才能弹出数字键盘的哦) URL: http://vczero.github.io/num_key/index.

js自制数字键盘

某些手机端H5页面或者触屏端,输入手机号码或者数字的地方,不想调用手机自带的键盘,用JS实现了数字键盘的控件 1.效果 2.调用方法 var numPad= new NumKeyBoard({ precision: 2, //精确度 minVal:10, //最小值 maxVal:1000 //最大值 }); 3.控件源码地址 https://github.com/xingxiaoyiyio/numPad-es

js输入密文弹出数字键盘

我们经常被产品要求,在移动端的web页面上的输入框输入密码时要弹出数字键盘,而不是全键盘,这个该怎么实现呢? 1.首先要弹出数字键盘,我们只能把input框的type从password改为tel 2.但经过第一步,输入的内容会变成明文,这时候也要星号显示,改怎么实现 经过一番研究,找到如下的实现方法: 1 function setPass(e) { 2 var target = e.currentTarget, 3 idx = target.selectionStart, 4 val = $(t

基于jQuery的数字键盘插件

有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要是多个小数点就有13个键,不好排列了,呵呵).支持鼠标拖动和触摸拖动,可关闭. 在线演示 1.页面代码 <ul> <li><input type="text" placeholder="手机号码后四位" id="numkeyboa

Android 自定义数字键盘

业务需求自定义数字键盘,写了一个demo 主要代码: import android.app.Activity; import android.content.Context; import android.graphics.drawable.ColorDrawable; import android.util.DisplayMetrics; import android.view.View; import android.view.WindowManager; import android.vi

纯js轮播测试版

这是一个纯js写的轮播测试版,代码有待改进 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/function.js"></script> <style type="tex

jquery实现导航启用数字键盘监听效果

今天写一个案例:就是导航可以用数字键盘来监听,也就是点击数字键盘相应的导航触发并且出现相应的样式.来看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0;} ul,li{list-style: none}

纯js实现html转pdf

项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式.简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf.咋不上天呢--查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种:1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass.2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试了一下,效

设置警告框为带有一个密文输入框的样式，并设置输入框键盘为数字键盘；判断密文输入框里的内容，并弹出相应提示

项目需求 废话不说,直接上试题 及答案 代码 #import "TableViewController.h" @interface TableViewController ()<UIAlertViewDelegate> @property (nonatomic, strong) NSMutableArray * dataSource; - (IBAction)buy:(id)sender; @end @implementation TableViewController -