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