Question

我看过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 我显然想在每个字段中收集数字，而忽略“ - ”或任何其他字符，如空格等。

提前致谢！

Answer 1

试试这个脚本

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

Answer 2

使用这个小提琴：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();
            }
        });
    });

html输入字段自动传递光标

2 个答案: