html数字键盘

html数字键盘

html部分

<div class="screen-btn" id="num_keyboard" style="display: none;">
				<div style="width: auto; height: auto; margin-left: 15%;">
					<div class="key_row2">
						<div class="key_row2" style="float: left;">
							<div class="key_row">
								<div class='key_normal' id='key_num_7'>7</div>
								<div class='key_normal' id='key_num_8'>8</div>
								<div class='key_normal' id='key_num_9'>9</div>
							</div>
						</div>
						<div class='key_normal' id='key_num_back' style="float: left; height: 40px;"><span
								class="mui-icon mui-icon-arrowthinleft"></span></div>
					</div>
					<div class="key_row2">
						<div class="key_row2" style="float: left;">

							<div class="key_row">
								<div class='key_normal' id='key_num_4'>4</div>
								<div class='key_normal' id='key_num_5'>5</div>
								<div class='key_normal' id='key_num_6'>6</div>
							</div>
							<div class="key_row">
								<div class='key_normal' id='key_num_1'>1</div>
								<div class='key_normal' id='key_num_2'>2</div>
								<div class='key_normal' id='key_num_3'>3</div>
							</div>
							<div class="key_row">
								<div class='key_normal' id='key_num_0' style="width: 164px;">0</div>
								<div class='key_normal' id='key_num_dot'>.</div>
							</div>
						</div>
						<div class='key_normal' id='key_num_enter'
							style="float: left; height: 128px; line-height: 128px; color: white; background-color: #337ab7">OK</div>
					</div>
				</div>
				<button type="button" id="next_step" style="border: 0px; border-radius: 0px;background-color: #337ab7;" 
					class="mui-btn mui-btn-blue mui-btn-block">确定</button>
			</div>

css部分

.screen-btn {
	width: 100%;
	height: auto;
	position: absolute;
	bottom: -10px;
	/* display: none; */
}

.screen {
	width: 100%;
	height: auto;
	margin: 20px;
}


.drugnum-btn {
	width: 150px;
	height: 40px;
	margin-left: 10px;
	margin-top: 20px;
	font-size: 15px;
	background-color: #ffffff;
	color: #4b4b4b;
	border: none;
	border-radius: 100px;
}


.key_row2 {
	display: block;
	position: relative;
	text-align: center;
	line-height: 40px;
	font-size: 10px;
}

.key_row {
	display: block;
	position: relative;

	height: 42px;
	font-size: 16px;
}

.key_normal {
	display: block;
	position: relative;
	border: 1px solid #bbb;
	width: 80px;
	height: 40px;
	background-color: #ccc;
	float: left;
	margin: 2px;
	padding: 2px;
	border-radius: 4px;
	font-size: 16px;
}

.key_normal:active {
	font-size: 14px;
	background-color: #eee;
}

js部分

// 数字键盘
	var keysInfo = [
	
		{
			name: 'key_num_0',
			code: 0,
			mark: '0'
		},
		{
			name: 'key_num_1',
			code: 1,
			mark: '1'
		},
		{
			name: 'key_num_2',
			code: 2,
			mark: '2'
		},
		{
			name: 'key_num_3',
			code: 3,
			mark: '3'
		},
		{
			name: 'key_num_4',
			code: 4,
			mark: '4'
		},
		{
			name: 'key_num_5',
			code: 5,
			mark: '5'
		},
		{
			name: 'key_num_6',
			code: 6,
			mark: '6'
		},
		{
			name: 'key_num_7',
			code: 7,
			mark: '7'
		},
		{
			name: 'key_num_8',
			code: 8,
			mark: '8'
		},
		{
			name: 'key_num_9',
			code: 9,
			mark: '9'
		},
	
		{
			name: 'key_num_dot',
			code: 10,
			mark: '.'
		},
		{
			name: 'key_num_enter',
			code: 11,
			mark: '[enter]'
		},
		{
			name: 'key_num_back',
			code: 12,
			mark: '[back]'
		},
	];
	var keyNameMap = {};
	var keyCodeMap = {};
	for (var i = 0; i < keysInfo.length; i++) {
		keyNameMap[keysInfo[i].name] = keysInfo[i];
		keyCodeMap[keysInfo[i].code] = keysInfo[i];
	}
	
	var input = document.getElementsByClassName("screen-input");
	for (var i = 0; i < input.length; i++) {
		console.log(input[i].id);
	}
	var karr = document.getElementsByClassName('key_normal');

	var effectivedays = document.getElementById('effectivedays');
	for (var i = 0; i < karr.length; i++) {
		if (karr[i].id == "key_num_back") {
			karr[i].onclick = function() {
				effectivedays.value = 						   	effectivedays.value.slice(0,effectivedays.value.length-1);
				}
			} else {
				karr[i].onclick = function() {
					effectivedays.value = effectivedays.value + keyNameMap[this.id].mark;
				}
			}
		}