Html 在chrome extension的弹出窗口窗体中按enter键时，登录按钮不起作用_Html_Google Chrome Extension_Popupwindow

Html 在chrome extension的弹出窗口窗体中按enter键时，登录按钮不起作用

html google-chrome-extension

Html 在chrome extension的弹出窗口窗体中按enter键时，登录按钮不起作用,html,google-chrome-extension,popupwindow,Html,Google Chrome Extension,Popupwindow,您好，我已经创建了一个弹出窗口，其中包含一个表单，要求用户输入电子邮件和密码。还有一个登录按钮。通常在大多数表单中，输入所有详细信息并按“回车”后，将自动单击“提交”按钮。但在这种情况下，只有当我点击“登录”按钮时，它才能工作。我希望它能在键盘上按“回车”键。我知道这是一个简单的问题。但我不明白为什么会发生这种情况。请帮助我这是我的userinfo.html（弹出窗口）要在输入时触发提交事件，表单必须有一个提交按钮。在您的特定情况下，您需要声明表单的默认行为，因为您希望使用后台页面“手动”

您好，我已经创建了一个弹出窗口，其中包含一个表单，要求用户输入电子邮件和密码。还有一个登录按钮。通常在大多数表单中，输入所有详细信息并按“回车”后，将自动单击“提交”按钮。但在这种情况下，只有当我点击“登录”按钮时，它才能工作。我希望它能在键盘上按“回车”键。我知道这是一个简单的问题。但我不明白为什么会发生这种情况。请帮助我这是我的userinfo.html（弹出窗口）

要在

输入时触发提交事件，表单必须有一个提交按钮。

在您的特定情况下，您需要声明表单的默认行为，因为您希望使用后台页面“手动”处理它
总之，需要以下步骤：

将按钮类型从按钮
更改为提交
为表单的提交事件注册侦听器。（注意：这将在单击按钮和输入时触发。）
防止表单提交时的默认行为
将登录处理委托给后台页面（通过其login
方法）

以下是新代码：
test.html
另请看，这是嘿，我又发布了一个问题。请参考这个链接好吗？请帮助我
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="test.js"></script>       
</head>
<body>
<b>Enter your Email ID and Password</b><br><br>
    <form id="userinfo">
        <label for="user">&nbsp;Email&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="text" id="user" /><span id="semail"></span>
        <br><br>
       <label for="pass">Password&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</label>
       <input type="password" id="pass" />
        <br>
        <br>
        <input type="button" id="login" value="Log In"/>
      </form>
     </body>
     </html>

    window.addEventListener('DOMContentLoaded', function() {
    var user  = document.querySelector('input#user');
     var pwd  = document.querySelector('input#pass');
     var login = document.querySelector('input#login');

     login.addEventListener('click', function() {     

     var userStr = user.value; 
     var pwdStr = pwd.value;

    chrome.runtime.getBackgroundPage(function(bgPage) {
     bgPage.login(userStr,pwdStr); });
     window.close();


     }); 

    });

<h4>Enter your Email ID and Password</h4>
<form id="userinfo">
    <label for="user">E-mail:    </label>
    <input type="text" id="user" required />
    <br />
    <label for="pass">Password:  </label>
    <input type="password" id="pass" required />
    <br />
    <br />
    <input type="submit" id="login" value="Log In" />
</form>

window.addEventListener('DOMContentLoaded', function () {
    var form = document.querySelector('form#userinfo');
    var user = document.querySelector('input#user');
    var pass = document.querySelector('input#pass');

    /* Register a listener on the form's `submit` event */
    form.addEventListener('submit', function (evt) {
        /* Prevent the event from being handled by the browser */
        evt.preventDefault();

        var userStr = user.value;
        var passStr = pass.value;

        /* Delegate login-handling to background-page */
        chrome.runtime.getBackgroundPage(function (bgPage) {
            bgPage.login(userStr, passStr);
        });
        window.close();
    });
});