Question

Aaargh。我写了一个简单的HTML页面，上面有一个表格来接收电话号码。我输入了一个Javascript函数，一旦它满了就会使焦点跳转到下一个表格框。一切似乎都很完美。

然而，由于某种原因，它无法正常工作。我不明白为什么，因为我创建了一个几乎相同的文件只有表单和功能，它的工作原理！所以这个特定文件中的某些内容阻止它，但经过30分钟的修补后我无法弄清楚是什么。

<html>
        <head>
            <script type="text/javascript">
                function moveToNext(curr, next) {
                    if(curr.value.length == curr.getAttribute("maxlength"))
                        next.focus();
                }
            </script>
            <title> Enter Phone Number </title>
            <style type="text/css">
                #content {
                    background:url(images/content-bg-rpt.gif) repeat;
                    margin: 0 auto;
                    height: 300px;
                    width: 500px;
                }
                #formArea {

                    margin-top: 50px;
                    width: 250px;
                    margin-left: auto;
                    margin-right: auto;
                }
                #submit {
                    position: relative;
                }
                .formInput { /* These are the input styles used in forms */
                    background: #f7f7f7 url(../img/input.gif) repeat-x;
                    border: 1px solid #d0d0d0;
                    margin-bottom: 6px;
                    color: #5f6c70;
                    font-size: 16px;
                    font-weight: bold;
                    padding-top: 11px;
                    padding-bottom: 11px;
                    padding-left: 11px;
                }
            </style>
        </head>

        <body>
            <div id="container">
                <div id="content">
                    <div id="formArea">
                        <form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
                            <input onkeyup="moveToNext(this, document.enterPhone.d345.formInput))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
                            <input onkeyup="moveToNext(this, document.enterPhone.d345))" type="text" name="d345" class="formInput" maxlength="3" size="3"  id="d345"></input>
                            <input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input>
                            <input id="submit" value="Enter" type="submit"></input>
                        </form>
                    </div>
                </div>
            </div>
        </body>

    </html>

Answer 1

两件事：

对于每个左括号，您只需要一个右括号。输入的onkeyup属性有两个右括号和一个开头括号。
直接传递HTML元素，而不是.formInput。

这解决了我的两个问题：

<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3"  id="d345"></input>

Answer 2

使用此 jsFiddle example

修复了您的代码

<强> HTML

<div id="container">
    <div id="content">
        <div id="formArea">
            <form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
                <input onkeyup="moveToNext(this, document.getElementsByName('d345'))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
                <input onkeyup="moveToNext(this, document.getElementsByName('d6789'))" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
                <input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input>
                <input id="submit" value="Enter" type="submit"></input>
            </form>
        </div>
    </div>
</div>

<强>的JavaScript

function moveToNext(curr, next) {
    if (curr.value.length == parseInt(curr.getAttribute("maxlength"), 10)) next[0].focus();
}

在你的JS中，你在整数和字符串（curr.value.length == curr.getAttribute("maxlength")）之间进行比较。在您的HTML中，您没有使用document.enterPhone.d345.formInput正确选择元素。

Answer 3

试着试一试：

<强> JS

function moveToNext(curr, next) {
    if (curr.value.length >= curr.maxLength) {
        document.getElementById(next).focus();
    }
}

<强> HTML

<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
    <input onkeyup="moveToNext(this, 'd345')" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"/>
    <input onkeyup="moveToNext(this, 'd6789')" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"/>
    <input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"/>
    <input id="submit" value="Enter" type="submit"/>
</form>

http://jsfiddle.net/JZxPR/

Answer 4

试试这个，用下面的代码替换三个输入标签：

<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3"  id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"></input>

Javascript函数将focus（）放在下一个表单元素上不起作用

4 个答案: