Question

我正在尝试构建一个动态输入框。当我点击小键盘时，我希望它显示在框中，并将该框限制为一个数字。当它达到极限时，下一个输入将转到下一个框。

我不希望用户能够在输入框上单击并手动输入值，我只是希望他们使用小键盘。输入框是否是一个很好的解决方案？

这是我的代码：

此代码将我点击的数字放在所有框中。如何编写它以便当盒子已有数字时它会转到另一个盒子？

return false

Answer 1

DEMO

 <div class="text-center" ng-repeat="value in unique">
   <div ng-click="incrementUpvotes(value)">
     <span ng-repeat="v in value.team track by $index">
       {{v}}
     </span>
     <span>
     upvotes: {{value.upvotes}}
     </span>
   </div>
  </div>

在输入

中添加at

<div class="passcode">
    <div class="passcodeBox">
        <ul>
            <li><input type="text" readonly></li>
            <li><input type="text" readonly></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <table>
        <tbody>
            <tr>
                <td class="numpad">1</td>
                <td class="numpad">2</td>
                <td class="numpad">3</td>
            </tr>
            <tr>
                <td class="numpad">4</td>
                <td class="numpad">5</td>
                <td class="numpad">6</td>
            </tr>
            <tr>
                <td class="numpad">7</td>
                <td class="numpad">8</td>
                <td class="numpad">9</td>
            </tr>
            <tr>
                <td></td>
                <td class="numpad">0</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 2

将您的输入字段设为只读，然后替换以下脚本，您将获得预期的结果。

$(function() {
    var $numpad = $('.numpad');
    var n=0;
    $numpad.on('click', function() {          
        var $passBox = $('input[type="text"]:eq('+n+')');        
        n=n+1;
        if(n>1)
            n=0;
        var $numValue = $(this).text();
        $passBox.val($numValue);
    });
});

DEMO

使用js / jquery进行动态输入

2 个答案: