html的原生自定义键盘(数字版)

简介: 前端现在很多时候,由于要限制文本的输入格式(这里指只允许输入数字),常常需要使用到自定义键盘。自定义键盘难免涉及到复用,资源占用等问题,有时候还会由于封装不好导致事件混乱、或者由于动画效果没实现好导致看上去很尴尬。

前言:


前端现在很多时候,由于要限制文本的输入格式(这里指只允许输入数字),常常需要使用到自定义键盘。自定义键盘难免涉及到复用,资源占用等问题,有时候还会由于封装不好导致事件混乱、或者由于动画效果没实现好导致看上去很尴尬。。。等这个那个的。本人根据这些情况,小做了一个原生的数字版键盘,希望可以给大家一点灵感,代码不好之处,敬请谅解!!!

正文:


正文,也叫代码解析,是程序员学习最快最有效的方式。。。。。

keyBoard.js(封装的方法就在这里了,纯原生,不依赖,当然,IE9+哈,建议只扩展,不修改。当然,我写的不好的地方随便改,改了留个言帮我纠正一下。android后退键关闭的话,这里是没写的,需要cordova之类的插件支持才行)

 
(function(window, storage, undefined) {
	'use strict'

	window.keyBoard = function() {
		var keyBoardDiv, keyBoard, commit, dialog, input, label, span, table, tbody, tr, td;
		var keyBoardClick, keyBoardDivClick, keyBoardTranstionEnd;
		var body = document.getElementsByTagName("body")[0];
		var keyModels = {
			SIMPLE: {
				COLS: 3,
				WIDTH: '33.3%',
				TYPE: 1,
				KEYS: [7, 8, 9, 4, 5, 6, 1, 2, 3, '-', 0, '<']
			},
			PLUS: {
				COLS: 4,
				WIDTH: '25%',
				TYPE: 1,
				KEYS: [7, 8, 9, 'C', 4, 5, 6, '↑', 1, 2, 3, '↓', '-', 0, '.', '<']
			}
		};

		var transtion;
		var currModel;
		var closeCB;
		var inputText = "",
			currText, fixed = 0,
			offset = -1;
		var popEvent = function() {
			this.closeKeyBoard(true);
		};
		var statusUtils = function() {
			var changing = false;
			return {
				setChanging: function(status) {
					changing = status;
				},
				getChanging: function() {
					return changing;
				}
			}
		}();

		return {
			openKeyBoard: openKeyBoard,
			closeKeyBoard: closeKeyBoard,
			keyModels: keyModels
		};

		function openKeyBoard(notice, initNumber, model, callbackEvery, callbackLast, openCallback, closeCallback) {
			if(statusUtils.getChanging()) {
				return false;
			}
			statusUtils.setChanging(true);
			var _this = this;

			/*****   处理返回事件    *******/
			if(window.history && window.history.pushState) {
				window.history.pushState(null, null, document.URL);
				window.addEventListener("popstate", popEvent.bind(_this), false);
			}
			/*****   处理返回事件结束    *******/

			// 参数置换
			if(typeof model === "function") {
				closeCallback = openCallback;
				openCallback = callbackLast;
				callbackLast = callbackEvery;
				callbackEvery = model;
				model = undefined;
			}

			// 关闭事件回调赋值
			closeCB = closeCallback;

			// UI
			model = model || keyModels.SIMPLE;
			if(!keyBoardDiv || model !== currModel) {
				inputText = "";
				currModel = model;

				if(keyBoardDiv) {
					body.removeChild(keyBoardDiv);
				}

				// 键盘上的对话框
				dialog = document.createElement("DIV");
				label = document.createElement("DIV");
				span = document.createElement("SPAN");
				input = document.createElement("SPAN");
				commit = document.createElement("BUTTON");

				dialog.className = 'qs-keyBoard-dialog';
				commit.innerHTML = "完成";
				input.className = "qs-inset-input";
				input.style.textAlign = 'center';
				label.appendChild(input);
				label.appendChild(commit);
				dialog.appendChild(span);
				dialog.appendChild(label);

				keyBoardDiv = document.createElement("DIV");
				keyBoardDiv.className = "qs-key-board-bg";

				// 键盘部分
				keyBoard = document.createElement("DIV");
				table = document.createElement("TABLE");
				tbody = document.createElement("TBODY");
				keyBoard.className = "qs-key-board";
				keyBoard.id = 'qs-keyboard-id';
				table.border = '0';
				for(var i = 0; i < currModel.KEYS.length; i++) {
					if(i % currModel.COLS === 0) {
						tr = document.createElement("TR");
					}
					if(currModel.KEYS[i] || currModel.KEYS[i] === 0) {
						td = document.createElement("TD");
						td.style.width = currModel.WIDTH;
						if(typeof(currModel.KEYS[i]) === "object") {
							currModel.KEYS[i].icon ? td.className = currModel.KEYS[i].icon : td.innerHTML = currModel.KEYS[i].text;
							currModel.KEYS[i].rows && td.setAttribute('rowspan', currModel.KEYS[i].rows);
							td.setAttribute("qs-data-value", currModel.KEYS[i].text);
						} else {
							td.innerHTML = currModel.KEYS[i];
							td.setAttribute("qs-data-value", currModel.KEYS[i]);
						}
						tr.appendChild(td);
					}
					if(i % currModel.COLS === currModel.COLS - 1) {
						tbody.appendChild(tr);
					}
				}
				table.appendChild(tbody);
				keyBoard.appendChild(dialog);
				keyBoard.appendChild(table);
				keyBoardDiv.appendChild(keyBoard);
				body.appendChild(keyBoardDiv);
			}

			input.innerHTML = inputText = (initNumber + "") || "";
			span.innerHTML = notice || '';

			//预移除事件(快速点击时动画误差)
			transtion = whichTransitionEvent(keyBoardDiv);//判断当前使用的事件类型
			if(keyBoardClick) {
				keyBoard.removeEventListener("click", keyBoardClick);
				keyBoardDiv.removeEventListener("click", keyBoardDivClick);
				keyBoardDiv.removeEventListener(transtion, keyBoardTranstionEnd);
			}

			// 监听事件
			keyBoardDivClick = function() {
				inputText = inputText === '-' ? '' : inputText;
				callbackLast && callbackLast(inputText ? Number(inputText) : '');
				_this.closeKeyBoard();
			};

			keyBoardClick = function(e) {
				switch(e.target.nodeName) {
					case 'TD':
						e.stopPropagation();
						e.preventDefault();
						doKeys(e);
						break;
					case 'BUTTON':
						break;
					default:
						e.stopPropagation();
						e.preventDefault();
						break;
				}
			};
			
			keyBoardTranstionEnd = function() {
				statusUtils.setChanging(false);
				openCallback && openCallback();
			};

			function doKeys(e) {
				currText = e.target.getAttribute("qs-data-value");
				inputText = inputText === '0' ? '' : inputText;
				switch(currText) {
					case '-':
						inputText = inputText.indexOf('-') === -1 ? '-' + inputText : inputText.slice(1);
						break;
					case '.':
						inputText = inputText ? inputText === '-' ? inputText = '-0.' : (inputText.indexOf('.') === -1 ? inputText + '.' : inputText) : '0.';
						break;
					case '<':
						inputText = inputText ? inputText.slice(0, -1) : '';
						break;
					case 'C':
						inputText = '';
						break;
					case '↑':
						inputText = calcNumber(inputText, 2);
						break;
					case '↓':
						inputText = calcNumber(inputText, 1);
						break;
					default:
						inputText = inputText === '-0' ? '-' : inputText;
						inputText += currText;
						break;
				}
				input.innerHTML = inputText;
				callbackEvery && callbackEvery(inputText ? Number(inputText) : '');
			}

			function calcNumber(str, type) {
				str = str === '-' ? "0" : str;
				offset = str.indexOf('.');
				fixed = offset > -1 ? str.length - offset - 1 : 0;
				str = Math.round(Number(str) * Math.pow(10, fixed) + Math.pow(10, fixed) * Math.pow(-1, type)) / Math.pow(10, fixed);
				return str.toString();
			}

			// 注册监听事件
			keyBoard.addEventListener("click", keyBoardClick, false);
			keyBoardDiv.addEventListener("click", keyBoardDivClick, false);
			keyBoardDiv.addEventListener(transtion, keyBoardTranstionEnd, false);

			keyBoardDiv.className = "qs-key-board-bg";
			setTimeout(function(){
				keyBoardDiv.className = "qs-key-board-bg qs-keyboard-up";				
			});
		}

		/**
		 * 关闭键盘
		 * @param doBack 是否执行一次回退(不是导航栏返回触发的需要执行一次回退)
		 */
		function closeKeyBoard(doBack) {
			if(statusUtils.getChanging()) {
				return false;
			}
			statusUtils.setChanging(true);
			
			// 动画完成事件
			var closeKeyBoardTranstionEnd = function() {
				keyBoardDiv.className = "qs-key-board-bg display-none";
				statusUtils.setChanging(false);
				keyBoardDiv.removeEventListener(transtion, closeKeyBoardTranstionEnd);
				
				// 键盘关闭回调事件
				closeCB && closeCB();
			};
			keyBoardDiv.addEventListener(transtion, closeKeyBoardTranstionEnd, false);
			keyBoardDiv.className = "qs-key-board-bg";
			inputText = '';
			
			// 处理回退事件
			if(window.history && window.history.pushState) {
				if(!doBack) {
					window.history.back();
				}
				window.removeEventListener("popstate", popEvent);
			}
			// 移除监听事件
			keyBoard.removeEventListener("click", keyBoardClick);
			keyBoardDiv.removeEventListener("click", keyBoardDivClick);
			keyBoardDiv.removeEventListener(transtion, keyBoardTranstionEnd);
		}

		function whichTransitionEvent(el) {
			var transitions = {
				'transition': 'transitionend',
				'OTransition': 'oTransitionEnd',
				'MozTransition': 'transitionend',
				'WebkitTransition': 'webkitTransitionEnd'
			}

			for(var t in transitions) {
				if(el.style[t] !== undefined) {
					return transitions[t];
				}
			}
		}
	}();
})(window, window.localStorage)


keyboard.css (这是键盘的样式文件,随便改)



.qs-key-board-bg {
    position: fixed;
    pointer-events: painted;
    width: 100%;
    left: 0;
    top: 100%;
    height: 100%;
    transition: top .3s ease;
    -webkit-transition: top .3s ease;
    z-index: 999;
    -moz-user-select: none;
    -ms-touch-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.qs-key-board {
    background-color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.qs-keyBoard-dialog {
    padding: 5px 10px;
    background-color: white;
    box-shadow: inset 0px 5px 15px #efefef;
}

.qs-keyBoard-dialog > div {
    display: flex;
    height: 30px;
}

.qs-keyBoard-dialog > div > button {
    width: 6em;
}

.qs-keyBoard-dialog > span {
    font-size: 14px;
    display: block;
    padding: 2px;
    color: #999999;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.qs-key-board > table {
    width: 100%;
    background-color: #efefef;
    border-spacing: 6px;
    border-collapse: separate;
}

.qs-key-board tr{
    height: 3.5rem;
}

.qs-key-board td {
    width: 33.3%;
    border: solid 1px #dedede;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    font-size: 2rem;
    text-align: center;
    vertical-align: middle;
    background-color: white;
}

.qs-key-board td:active{
    background-color: #dedede;
}

.qs-keyboard-up {
    top: 0%;
}

.qs-inset-input {
    position: relative;
    display: inline-block;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-right: 10px;
    border: none;
    font-size: 18px !important;
    width: 100%;
    height: 30px !important;
    line-height: 30px;
    background-color: rgb(238,238,238) !important;
}

.qs-keyboard-switch {
    position: absolute;
    overflow: hidden;
    pointer-events: painted;
    right: -120px;
    z-index: 1000;
    margin-bottom: -7px;
    transition: right 300ms ease;
    -webkit-transition: right 300ms ease;
}

.qs-keyboard-switch:before{
    position: absolute;
    z-index: 1;
    right: 25px;
    top:12px;
    font-size: 20px;
    color: white;
    line-height: 20px;
    width: 20px;
    height: 20px;
}

.qs-keyboard-switch-show {
    right: 0px;
}

.qs-input-dialog {
    width: 100%;
    z-index: 999;
    position: absolute;
    bottom: 0;
    margin-bottom: -61px;
    transition: margin-bottom 300ms ease;
}

.qs-input-dialog-show {
    margin-bottom: 0px;
}

keyboard.html 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/keyBoard.css" />
		<style>
			html, body{
				height: 100%;
				padding: 0;
				margin: 0;
				overflow: hidden;
			}
			
			span#input{
				display: inline-block;
				border-bottom: solid 1px green;
				width: 200px;
				height: 30px;
				line-height: 30px;
				margin: 20px;
				background-color: #EFEFEF;
			}
		</style>
	</head>

	<body>
		<span id="input" onclick="openKeyBoard(this)"></span>
	</body>
	<script>
		function openKeyBoard(_this){
			keyBoard.openKeyBoard('请输入数字', _this.innerText, keyBoard.keyModels.PLUS, function(number){
				_this.innerText = number;
			});
		}
	</script>
	<script type="text/javascript" src="js/keyBoard.js" ></script>
</html>

运行结果:


2962e0b22fa2fb23f4dc2466adb086e3d0ce135e


后语:


  对了,我这个键盘放在body下的,所以body应该是高度100%,宽度充满,并且又overflow:hidden的,这部分观众老爷自行调整,position改fixed也是可以的
目录
相关文章
|
5月前
|
JavaScript
自定义全能搜索HTML源码
自定义全能搜索HTML源码
52 1
自定义全能搜索HTML源码
|
5月前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
12天前
|
前端开发
Twaver-HTML5基础学习(28)工具条(添加自定义按钮_自定义事件)
这篇文章介绍了如何在Twaver-HTML5中创建工具条,添加自定义按钮,并绑定自定义事件,包括放大、缩小、占满屏幕和重置画布大小的功能。
33 11
|
1月前
|
数据安全/隐私保护
自定义密码访问单页HTML源码
自定义密码访问单页HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
32 1
|
2月前
|
数据安全/隐私保护
自定义密码访问跳转页面HTML源码
自定义密码访问跳转页面HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
38 0
自定义密码访问跳转页面HTML源码
|
2月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
50 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
4月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
47 3
|
4月前
HTML列表指南:有序、无序与自定义列表的妙用
HTML列表指南:有序、无序与自定义列表的妙用
109 0
|
5月前
|
JavaScript
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
|
5月前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
62 1
下一篇
无影云桌面