这是我的代码目前它不包含任何javascript只是HTML,因为我不确定如何去做这件事。下面的代码包含1 - 9和3个其他按钮的键盘。例如,如果我按1 Ix,则希望它在pinpad上方的字段中输入1
这是HTML:
<div class="container text-center">
<h2>Pinpad</h2>
<hr>
<table style="display: inline">
<tr>
<td colspan="4">
This is the Input field
<input type="password" readonly="yes" class="form-control" placeholder="PIN Number" style="text-align: center;">
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg">1</button>
</td>
<td>
<button class="btn btn-default btn-lg">2</button>
</td>
<td>
<button class="btn btn-default btn-lg">3</button>
</td>
<td>
<button class="btn btn-danger btn-block btn-lg"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg">4</button>
</td>
<td>
<button class="btn btn-default btn-lg">5</button>
</td>
<td>
<button class="btn btn-default btn-lg">6</button>
</td>
<td>
<button class="btn btn-warning btn-block btn-lg"><i class="fa fa-arrow-left"></i></button>
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg">7</button>
</td>
<td>
<button class="btn btn-default btn-lg">8</button>
</td>
<td>
<button class="btn btn-default btn-lg">9</button>
</td>
<td>
<button class="btn btn-success btn-lg"><i class="fa fa-check"></i></button>
</td>
</tr>
<tr>
<td colspan="4">
<button class="btn btn-default btn-block btn-lg">0</button>
</td>
</tr>
</table>
答案 0 :(得分:1)
首先,给每个按钮一个ID,然后使用这个jQuery:
$(document).ready(function(){
$("#buttonId").click(function(){
$("input:text").val("buttonNumber");
});
});
答案 1 :(得分:0)
解决方案是分配文本字段以及按钮唯一ID(&#39;字段&#39;,&#39; b1&#39;,&#39; b2&#39; ,&#39; b3&#39;,...)
然后你可以这样构建你的JavaScript:
function writeInField (e) {
document.getElementById('field').value = document.getElementById('field').value+''+e.target.innerHTML;
}
document.getElementById('b1').addEventListener('click', writeInField, false);
document.getElementById('b2').addEventListener('click', writeInField, false);
document.getElementById('b3').addEventListener('click', writeInField, false);
答案 2 :(得分:0)
也许你正在尝试做这样的事情,所以我对你进行了一些阐述:
<强> HTML:强>
<div class="container text-center">
<h2>Pinpad</h2>
<hr>
<table style="display: inline">
<tr>
<td colspan="4">
<input id="input" type="text" readonly="yes" class="form-control" placeholder="PIN Number" style="text-align: center;">
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg key">1</button>
</td>
<td>
<button class="btn btn-default btn-lg key">2</button>
</td>
<td>
<button class="btn btn-default btn-lg key">3</button>
</td>
<td>
<button class="btn btn-danger btn-block btn-lg clear"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg key">4</button>
</td>
<td>
<button class="btn btn-default btn-lg key">5</button>
</td>
<td>
<button class="btn btn-default btn-lg key">6</button>
</td>
<td>
<button class="btn btn-warning btn-block btn-lg cancel"><i class="fa fa-arrow-left"></i></button>
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg key">7</button>
</td>
<td>
<button class="btn btn-default btn-lg key">8</button>
</td>
<td>
<button class="btn btn-default btn-lg key">9</button>
</td>
<td>
<button class="btn btn-success btn-lg clear check"><i class="fa fa-check"></i></button>
</td>
</tr>
<tr>
<td colspan="4">
<button class="btn btn-default btn-block btn-lg key">0</button>
</td>
</tr>
</table>
</div>
<div class="container text-center error"></div>
<强> JS:强>
$(document).ready(function(){
//restrict the input
var maxPin = 4;
//add the chosen number
$('.key').click(function(){
$('.error').html('')
if($('#input').val().length < maxPin){
if ($('#input').val() == '') {
$('#input').val($(this).html());
}else{
$('#input').val($('#input').val() + $(this).html())
}
}
});
//clear the iput field
$('.clear').click(function(){
$('.error').html('')
$('#input').val('')
})
//remove the last inserted number
$('.cancel').click(function(){
$('.error').html('')
$(input).val(
function(index,value){
return value.substr(0,value.length-1);
})
})
//check
$('.check').click(function(){
alert('Do something with this')
})
})
你可以在这里看到演示: