Привет, я создал всплывающее окно, содержащее форму, запрашивающую пользователя ввести адрес электронной почты и пароль. И есть кнопка входа в систему. Обычно в большинстве форм после ввода всех данных и нажатия "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"> Email : </label>
<input type="text" id="user" /><span id="semail"></span>
<br><br>
<label for="pass">Password : </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();
});
});
Чтобы событие отправки было инициировано при ENTER
форма должна иметь кнопку отправки.
В вашем конкретном случае вам нужно отменить поведение по умолчанию вашей формы, так как вы хотите обрабатывать его "вручную" с использованием фоновой страницы.
Таким образом, необходимы следующие шаги:
button
с button
чтобы 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();
});
});
См. Также эту короткую демонстрацию.