Форма входа в Javascript не отправляется, когда пользователь нажимает Enter

Здесь обсуждается сразу несколько тем. Попробуем уточнить.

<сильный>1. Ваша непосредственная забота:

(Почему кнопка ввода не работает при нажатии ENTER?)

Используйте тип кнопки отправить.

<input type="submit".../> 

..вместо

<input type="button".../>

Ваша проблема на самом деле не имеет ничего общего с использованием атрибута onclick. Вместо этого вы не получаете желаемого поведения, потому что вы использовали тип ввода button, который просто не ведет себя так же, как кнопки отправки.

В HTML и XHTML есть поведение по умолчанию для определенных элементов. Кнопки ввода в формах часто имеют тип «отправить». В большинстве браузеров кнопки «отправить» срабатывают по умолчанию при нажатии клавиши ENTER из выделенного элемента в том же элементе формы. Тип ввода «кнопка» не работает. Если вы хотите воспользоваться этим поведением по умолчанию, вы можете изменить тип ввода на «отправить».

Например:

<form action="/post.php" method="post">
    <!-- 
    ...
    -->
    <input type="submit" value="go"/>
</form>

<сильный>2. Вопросы безопасности:

@Ady упомянул о проблеме безопасности. Существует целый ряд проблем с безопасностью, связанных с выполнением входа в систему с помощью javascript. Это, вероятно, выходит за рамки области этого вопроса, тем более что вы указали, что вас это не особенно беспокоит, и тот факт, что ваш метод входа на самом деле просто устанавливал для location.href значение новая html-страница (указывающая на то, что у вас, вероятно, нет реального механизма безопасности).

Вместо того, чтобы копаться в этом, вот ссылки на связанные темы на SO, если кто-то заинтересован в этих вопросах напрямую.

• Есть ли способ, которым я может выполнить проверку пользователя на стороне клиента?
• Шифрование вызовов Ajax для аутентификации в jQuery

<сильный>3. Другие проблемы:

Вот быстрая очистка вашего кода, которая соответствует некоторым рекомендациям. Это не решает проблему безопасности, о которой упоминали люди. Вместо этого я включаю его просто для того, чтобы проиллюстрировать некоторые полезные привычки. Если у вас есть конкретные вопросы о том, почему я написал что-то определенным образом, не стесняйтесь спрашивать. Кроме того, просмотрите в стеке похожие темы (поскольку ваш вопрос, возможно, уже обсуждался здесь).

Главное, на что следует обратить внимание, — это удаление атрибутов события (onclick="", onsubmit="" или onkeypress="") из HTML. Они принадлежат javascript, и считается лучшей практикой не допускать javascript-событий в разметку.

<form action="#" method="post" id="loginwindow">
    <h3>Login to view!</h3>
    <label>User ID: <input type="text" id="userid"></label>
    <label>Password: <input type="password" id="pass"></label>
    <input type="submit" value="Check In" />
</form>

<script type="text/javascript">
window.onload = function () {
    var loginForm = document.getElementById('loginwindow');
    if ( loginwindow ) {
        loginwindow.onsubmit = function () {

            var userid = document.getElementById('userid');
            var pass = document.getElementById('pass');

            // Make sure javascript found the nodes:
            if (!userid || !pass ) {
                return false;
            }

            // Actually check values, however you'd like this to be done:
            if (pass.value !== "secret")  {
                location.href = 'failure.html';
            }

            location.href = 'album.html';
            return false;
        };
    }
};
</script>

Вместо ‹input type="button"› используйте ‹input type="submit"›. Вы можете поместить свой код проверки в обработчик отправки формы:

‹form id="loginwindow" onsubmit="validate(...)"›

это потому, что это не отправка формы, поэтому нет события, которое будет инициировано, когда пользователь нажимает ввод. Альтернативой указанным выше параметрам отправки формы было бы добавление прослушивателя событий для формы ввода, чтобы определить, нажал ли пользователь ввод.

<input type="password" name="text1" onkeypress="detectKey(event)">

Поместите скрипт прямо в ваш html-документ. Измените значение onclick на функцию, которую вы хотите использовать. Сценарий в html сообщит форме для отправки, когда пользователь нажмет кнопку ввода или кнопку отправки.

 <form id="Form-v2" action="#">

<input type="text" name="search_field"  placeholder="Enter a movie" value="" 
id="search_field" title="Enter a movie here" class="blink search-field"  />
<input type="submit" onclick="" value="GO!" class="search-button" />        
 </form>

    <script>
    //submit the form
    $( "#Form-v2" ).submit(function( event ) {
      event.preventDefault();
    });
         </script>

Может быть, вы можете попробовать это:

<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
   <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
   <input type="submit" value="Check In"/>
</p>

</form>

Как указывали другие, есть и другие проблемы с вашим решением. Но это должно ответить на ваш вопрос.

Конечно, это слишком небезопасно, так как каждый может взломать его за секунду ...

-- единственный псевдобезопасный способ сделать js-логин:

<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
  Name: <input type="text" name="theName"><br>
  Password: <input type="password" name="thePassword"><br>
  <input type="submit" value="Login now">
</form>

Моя мысль = Огромная дыра в безопасности. Любой может просмотреть имя пользователя и пароль.

Более актуально для вашего вопроса: - У вас происходят два события.

1. Пользователь нажимает кнопку.
2. Пользователь нажимает ввод.

Клавиша ввода отправляет форму, но не нажимает кнопку.

Поместив свой код в метод onsubmit формы, код будет запускаться при отправке формы. Изменив тип ввода кнопки для отправки, кнопка отправит форму так же, как кнопка ввода.

Затем ваш код будет работать для обоих событий.