2

啊。我写了一个简单的 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>
4

4 回答 4

1

两件事情：

  1. 对于每个左括号，您只需要一个右括号。您输入的onkeyup属性有两个右括号和一个左括号。
  2. 直接传递 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>
于 2013-04-07T02:26:36.617 回答
0

使用此jsFiddle 示例修复了您的代码

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();
}

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

于 2013-04-07T02:28:06.403 回答
0

试试这个：

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/

于 2013-04-07T02:34:43.540 回答
0

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

<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>
于 2013-04-07T03:03:30.097 回答