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

不要忘记使用 'Developer Tools' 控制台来快速捕获此类错误。只是为了完整 Chrome 'Developer Tools' 可以在这里找到：

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

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

document.getElementById('textbox').focus() not working after submit form

html

javascript

forms

focus