Кнопка входа не работает при нажатии Enter во всплывающем окне в расширении Chrome

Question

Кнопка входа не работает при нажатии Enter во всплывающем окне в расширении Chrome

0

Привет, я создал всплывающее окно, содержащее форму, запрашивающую пользователя ввести адрес электронной почты и пароль. И есть кнопка входа в систему. Обычно в большинстве форм после ввода всех данных и нажатия "enter" кнопка отправки будет автоматически в этом случае, но в этом случае, только когда я нажимаю кнопку входа, он работает. Я хочу, чтобы он работал над нажатием "enter" на клавиатуре. Я знаю, что это простой вопрос. Но я не могу понять, почему это происходит.Пожалуйста, помогите мне. Вот мой userinfo.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>

Вот мой test.js

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


     }); 

    });

user1991 04 дек. 2013, в 07:01

Источник

Теги:

html

google-chrome-extension

popupwindow

1 ответ

Ещё вопросы

gkalpak · Accepted Answer · 2013-12-04T05-02-00.000Z

Чтобы событие отправки было инициировано при ENTER форма должна иметь кнопку отправки.
В вашем конкретном случае вам нужно отменить поведение по умолчанию вашей формы, так как вы хотите обрабатывать его "вручную" с использованием фоновой страницы.

Таким образом, необходимы следующие шаги:

Измените тип button с button чтобы submit.
Зарегистрируйте слушателя для отправки формы. (Примечание: это будет срабатывать при нажатии кнопки и ENTER).
Предотвратите поведение по умолчанию в форме-submit.
Делегируйте обработку входа на фоновый рисунок (посредством метода login).

Вот новый код:

test.html

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

test.js

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

См. Также эту короткую демонстрацию.

эй .. это работает так хорошо .. спасибо вам большое ..
эй, я отправил другой вопрос. Не могли бы вы сослаться на эту ссылку? stackoverflow.com/questions/20367833/… пожалуйста, помогите мне