Question

这是我的代码目前它不包含任何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>

http://jsfiddle.net/feather0148/17dhf4ae/

Answer 1

首先，给每个按钮一个ID，然后使用这个jQuery：

$(document).ready(function(){
    $("#buttonId").click(function(){
        $("input:text").val("buttonNumber");
    });
});

希望这有帮助！这些也可以提供帮助：Example w3schools another

Answer 2

解决方案是分配文本字段以及按钮唯一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);

Answer 3

也许你正在尝试做这样的事情，所以我对你进行了一些阐述：

<强> 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')

  })
})

你可以在这里看到演示：

https://jsfiddle.net/0he9jouw/

在按钮上输入文本到文本字段按Javascript

3 个答案: