提交后，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