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

Question

我正在尝试实现一个简单的表单，并尝试在提交后将焦点设置在表单中的第一个文本框上，但它不起作用。我无法在此站点上使用代码 sn-p，因为我使用的是 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() 之前，您的代码如何在 .reset() 调用中崩溃：