提交后，Chrome扩展程序HTML将焦点设置为输入字段

Question

这是一个chrome扩展名，我试图让焦点在提交后返回到文本框输入。

基本上，我希望输入过程如下：1.用户键入2.在用户中输入或单击按钮3.表单提交，不刷新，自行重置并保持焦点，以便用户可以轻松添加更多内容输入。

如果用户按Enter，则焦点将保留。 但是，一旦用户按下按钮（添加网站），文本框输入就会失去焦点。 我不确定以下HTML和相应的JavaScript为什么不起作用：

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="popup.js"></script>
    <title>Add a website to block</title>
  </head>
  <body>
    <form id="addWebsiteForm">
    Website Address: <input type="text" id="websiteAddress"><br>
    <input type="submit" value="Add Website">
    </form>
  </body>
</html>

JavaScript：

var addWebsiteForm;

document.addEventListener('DOMContentLoaded', function(){
  addWebsiteForm = document.getElementById("addWebsiteForm");
  addWebsiteForm.addEventListener('submit', addWebsite);
});

function addWebsite(event) {
  addWebsiteForm.focus();
  event.preventDefault();
  var websiteAddress = document.getElementById("websiteAddress").value;
  var storedWebsites;

  chrome.storage.local.get('websites', function(objects) {

    if (!objects.websites) {
        storedWebsites = [];
    } else {
        storedWebsites = objects.websites;
    }

    storedWebsites.push(websiteAddress);
    chrome.storage.local.set({'websites':storedWebsites});
    addWebsiteForm.reset();
  });
}

Answer 1

您实际上只犯了一个小错误。 您将重点放在整个表单而不是输入字段上。 在JavaScript的顶部，用输入文本的ID创建另一行。 重置表单后，将焦点设置为该焦点。

像这样，

websiteAddress = document.getElementById("websiteAddress");

websiteAddress.focus();

提交后，Chrome扩展程序HTML将焦点设置为输入字段

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-07-19 07:28:12

提交后，Chrome扩展程序HTML将焦点设置为输入字段

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-07-19 07:28:12

解决方案1
0 已采纳 2014-07-19 07:28:12