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 Extension HTML在提交后将焦点设置为输入字段

1 个答案: