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

Question

Я работаю над простым входом в систему Javascript для сайта и придумал следующее:

<form id="loginwindow">
<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="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>

</form>
<script language = "javascript">

function validate(text1,text2,text3,text4)
{
 if (text1==text2 && text3==text4)
 load('album.html');
 else 
 {
  load('failure.html');
 }
}
function load(url)
{
 location.href=url;
}
</script>

... который работает, за исключением одного:нажатие Enter для отправки формы ничего не делает.У меня такое ощущение, что это потому, что я использовал «onclick», но не знаю, что использовать вместо этого.Мысли?

---

Хорошо, да, я прекрасно понимаю, насколько это ненадежно с точки зрения безопасности.Это не что-то особо секретное, так что это не такая уж большая проблема, но если бы вы, ребята, могли бы уточнить свои мысли с помощью кода, я бы хотел увидеть ваши идеи.код, который я перечислил, — это буквально все, с чем я работаю на данный момент, поэтому при необходимости я могу начать с нуля.

Answer 1

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

1.Ваша непосредственная забота:

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

Использовать представлять на рассмотрение тип кнопки.

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

..вместо

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

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

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

Например:

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

2.Проблемы безопасности:

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

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

• Есть ли способ выполнить проверку пользователя на стороне клиента?
• Шифрование вызовов 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>

Answer 2

Вместо < тип ввода = " кнопка " > ;, используйте < тип ввода = " submit " & GT ;. Вы можете поместить свой проверочный код в форму обработчика отправки:

< form id = " loginwindow " & Onsubmit = Quot; проверки (...) Quot &; GT &;

Answer 3

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

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

Answer 4

Поместите скрипт прямо в ваш 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>

Answer 5

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

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

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

Answer 6

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

- только псевдобезопасный способ сделать 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>

Answer 7

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

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

<Ол>

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

Пользователь нажимает ввод.

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

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

Ваш код будет запущен для обоих событий.