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

时间:2015-12-12 17:23:53

标签: javascript html

这是我的代码目前它不包含任何javascript只是HTML,因为我不确定如何去做这件事。下面的代码包含1 - 9和3个其他按钮的键盘。例如,如果我按1 Ix,则希望它在pinpad上方的字段中输入1

Visual Representation

这是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/

3 个答案:

答案 0 :(得分:1)

首先,给每个按钮一个ID,然后使用这个jQuery:

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

希望这有帮助! 这些也可以提供帮助:Example w3schools another

答案 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')

  })
})

你可以在这里看到演示:

https://jsfiddle.net/0he9jouw/