javascript - document.getElementById ('textbox' ).focus() 提交表单后不起作用

Question

我正在尝试实现一个简单的表单，并且尝试在提交后将焦点设置在表单中的第一个文本框上，但它不起作用。我无法使用此网站上的代码片段，因为我正在使用 localStorage，并且它不允许我使用它)

这是我在 Codepen 上的代码:http://codepen.io/anon/pen/ZemVpz

以下是我的 HTML 的外观，供快速引用:

document.getElementById('formBookmark').addEventListener('submit', addBookmark);

function addBookmark(e) {
    var siteName = document.getElementById('txtSiteName').value;
    var siteUrl = document.getElementById('txtSiteUrl').value;
    if (!validate(siteName, siteUrl)) {
        alert("Please fill the blank fields");
        return;
    }

    var newBookmark = {
        siteName: siteName,
        siteUrl: siteUrl
    }

    var bookmarks = getlocalBookmarks() || [];

    bookmarks.push(newBookmark);
    localStorage.setItem('tf-bookmarks',JSON.stringify(bookmarks));
    //trying to set focus here
    document.getElementById(formBookmark).reset();
    document.getElementById("txtSiteName").focus();
    
    fetchBookmarks();
    e.preventDefault();
   
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form id="formBookmark">
                <div class="form-group">
                    <label for="txtSiteName">Site Name:</label>
                    <input type="text" name="txtSiteName" id="txtSiteName" class="form-control" placeholder="Google" />
                </div>
                <div class="form-group">
                    <label for="txtSiteUrl">Site Url:</label>
                    <input type="text" name="txtSiteUrl" id="txtSiteUrl" class="form-control" placeholder="http://google.com"/>
                </div>
                <button class="btn btn-success" id="btnAddLink" type="submit">Add Bookmark</button>
            </form>

我可以使用 body onload 事件来执行此操作，但是如果页面上有多个表单怎么办？为什么通过 JS 设置焦点的那行代码不起作用？

谢谢。

Answer 1

别担心，这只是一个小错字 - 您忘记在此处的“formBookmark”周围添加引号:

//trying to set focus here
document.getElementById(formBookmark).reset();
document.getElementById("txtSiteName").focus();

不要忘记使用“开发人员工具”控制台来快速捕获此类错误。 为了完整起见，可以在此处找到 Chrome“开发人员工具”:

现在控制台清楚地显示了您的代码如何在尝试 .focus() 之前仅调用 1 行 .reset() 时崩溃: