下一个表单元素上的Javascript函数focus（）不起作用_Javascript_Html_Forms

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

javascript html forms

下一个表单元素上的Javascript函数focus（）不起作用,javascript,html,forms,Javascript,Html,Forms,啊。我写了一个简单的HTML页面，上面有一个表单，可以接收电话号码。我加入了一个Javascript函数，该函数使焦点在下一个表单框满后跳转到下一个表单框。一切似乎都很完美然而，由于某些原因，它不起作用。我不明白为什么，因为我创建了一个几乎完全相同的文件，只有表单和函数，而且它可以工作！因此，这个特定文件中的某些内容正在阻止它，但经过30分钟的修补，我不知道是什么 <html> <head> <script type="te

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


函数moveToNext（当前、下一个）{
if（curr.value.length==curr.getAttribute（“maxlength”））
next.focus（）；
}
输入电话号码
#内容{
背景：url（图片/内容bg rpt.gif）重复；
保证金：0自动；
高度：300px；
宽度：500px；
}
#形式区{
边缘顶部：50px；
宽度：250px；
左边距：自动；
右边距：自动；
}
#提交{
位置：相对位置；
}
.formInput{/*这些是表单中使用的输入样式*/
背景：#F7F7URL（../img/input.gif）repeat-x；
边框：1px实心#d0；
边缘底部：6px；
颜色：#5f6c70；
字体大小：16px；
字体大小：粗体；
填充顶部：11px；
填充底部：11px；
左侧填充：11px；
}

两件事：

对于每个左括号，您只需要一个右括号。输入的

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>

使用此修复了您的代码。

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>

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

在JS中，您在整数和字符串之间进行比较（

curr.value.length==curr.getAttribute（“maxlength”）

）。在HTML中，您没有使用

document.enterPhone.d345.formInput正确选择元素
JS
function moveToNext(curr, next) {
    if (curr.value.length >= curr.maxLength) {
        document.getElementById(next).focus();
    }
}

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>

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



试试这个，用下面的代码替换三个输入标签：
<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>


你能在JSFIDLE中做一个最简单的例子吗？在输入的onkeyup
属性中，哪里缺少括号？int/string不匹配实际上并不重要，因为他使用的是==
@zachratner确切地说是Zach，谢谢。我想弄明白j08691是什么意思，虽然它不会伤害我，但我真的不需要。