将焦点(）放在下一个表单元素上的Javascript函数不起作用

Javascript function to focus() on next form element not working

本文关键字：元素 Javascript 不起作用 函数 表单 下一个 焦点      更新时间：2023-09-26

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>

两件事：

  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>

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

在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

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

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

<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>
相关文章：