0

我见过 html 表单，其中光标会自动从一个输入字段移动到另一个输入字段。当您需要粘贴跨越多个输入字段的序列号，或者键入或粘贴在多个字段输入中采用的银行帐号时，它很有用，例如：

<td style="width: 50%;"><label for="bank_ac"><input class="textline" style="width: 35px;" type="text" name="bank_ac_1" maxlength="2" onkeydown="validateNumber(event);" aria-required="true" required>
<input class="textline" style="width: 55px;" type="text" name="bank_ac_2" maxlength="4" onkeydown="validateNumber(event);" aria-required="true" required>
<input class="textline" style="width: 75px;" type="text" name="bank_ac_3" maxlength="7" onkeydown="validateNumber(event);" aria-required="true" required>
<input class="textline" style="width: 45px;" type="text" name="bank_ac_4" maxlength="3" onkeydown="validateNumber(event);" aria-required="true" required></label></td>

是否有一些简单的方法可以使光标从一个输入字段传递到下一个输入字段，以便一次粘贴中跨所有四个字段粘贴？如果可能的话，我宁愿不必更改/更改任何 CSS。validateNumber 函数使用嵌入在页眉中的这个脚本：

function validateNumber(evt){
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 45 || key == 46 ||
    // Dot (Decimal point)
    key == 190){
        // input is VALID
    } else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

重要提示：用户可能会以如下格式将内容粘贴到这些字段中：12-1234-1234567-123 我显然想收集每个字段中的数字，同时忽略“-”或任何其他字符，如空格等。

提前致谢！

4

2 回答 2

0

use this Fiddle:FIDDLE

<HTML>
<div><sapn>Enter Key Code :</sapn>
<input class="Box" style="width: 35px;" type="text" name="number1" maxlength="2">
<input class="Box"style="width: 55px;" type="text" name="number2" maxlength="4">
<input class="Box"style="width: 75px;" type="text" name="number3" maxlength="7">
<input class="Box" style="width: 45px;" type="text" name="number4" maxlength="3">
</div>

 <CSS>

   .Box:focus
    {
        border: thin solid #FFD633;
        -webkit-box-shadow: 0px 0px 3px #F7BB2E;
        -moz-box-shadow: 0px 0px 3px #F7BB2E;
        box-shadow: 0px 0px 3px #F7BB2E;
    }
    .Box
    {
        height: 15px;
        width: 4%;
        text-align: justify;
        letter-spacing: 5px; /*CSS letter-spacing Property*/
        padding: 10px;
    }


 <SCRIPT>

   $(document).ready(function () {
        $('.Box').live("keyup", function (e) {
             var Length=$(this).attr("maxlength");

            if ($(this).val().length >= parseInt(Length)){
                $(this).next('.Box').focus();
            }
        });
    });
于 2013-11-11T05:44:49.510 回答
0

试试这个脚本

   <script type="text/javascript">
    $('input').bind('keyup',function(event){
        var maxlen = $(this).attr('maxlength');
        if($(this).val().length >= parseInt(maxlen))
        {
            var next = $(this).next();
            if(next)
                next.focus();
        }
    });
  </script>

在这里演示：http: //jsfiddle.net/NW99e/

于 2013-11-11T05:32:56.497 回答