0

이것은 Chrome 확장 프로그램이며 제출 후 텍스트 입력으로 돌아가려고합니다. 입력 2. 사용자 프레스 1. 사용자 유형을 입력하거나 자체를 재설정, 새로 고침하지 않습니다 3. 양식 제출 버튼을 클릭하고, 초점을 유지 :크롬 확장 HTML 설정 제출 후 입력 필드에 초점 맞추기

는 기본적으로, 다음과 같이 입력 프로세스가되고 싶어 사용자는 더 많은 입력을 쉽게 추가 할 수 있습니다.

사용자가 enter 키를 누르면 포커스가 유지됩니다. 그러나 사용자가 단추 (웹 사이트 추가)를 누르면 텍스트 상자 입력에 포커스가 없어집니다.

<!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> 

자바 스크립트 : 다음 HTML 및 해당 자바 스크립트가 작동하지 않는 이유는 확실하지 않다

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

답변

0

실제로는 하나의 작은 오류 만 발생했습니다. 입력 필드 대신 전체 양식에 초점을 맞추고 있습니다. JavaScript 상단에 입력 텍스트의 ID가있는 다른 행을 작성하십시오. 그런 다음 양식을 재설정 한 후 해당 포커스를 설정하십시오. 이처럼

,

websiteAddress = document.getElementById("websiteAddress"); 

websiteAddress.focus();