Отправка формы нажатием возврата, когда кнопка отправки скрыта;работает в Firefox, ничего не делает в Chrome

Question

У меня есть форма с некоторыми полями ввода и скрытой кнопкой отправки (скрыто через стиль = "display: none").

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

Однако в Chrome, когда вы нажимаете клавишу return, ничего не происходит. Мне было интересно, как вы добавили эту функциональность обратно в Chrome?

Вот форма, посмотрите на нее в Chrome: http://jsfiddle.net/B59rV/2/

<form method="post"  action="/xxxx" accept-charset="UTF-8">

    <input type="hidden" value="SSjovFqEfRwz2vYDIsB6JRdtLAuXGmnT+tkyZnrtqEE=" name="authenticity_token">

    <div class="input text_field">
    <label>Email</label>
    <input type="text" size="30" name="user_session[email]" />
  </div>

  <div class="input text_field">
    <label>Password</label>
    <input type="password" size="30" name="user_session[password]" />
  </div>


    <input type="submit" value="Sign In" style="display: none;" >

</form>

Answer 1

Я буквально понятия не имею, почему он не работает в Chrome. Я думаю, что это ошибка.

Однако это как-то связано с этим display: none.

Я нашел неприятный, ужасный (!!) обходной путь:

input[type="submit"] {
    position: absolute;
    top: -1000px
}

Не скрывайте его: вместо этого поместите его за пределы экрана.

Live Demo - работает в Chrome.

Answer 2

Протестировано в Chrome 22 и Firefox 18, возможно, это лучший обходной путь

.hide-submit {
    position: absolute;
    visibility: hidden;
}

<button type="submit" class="hide-submit">Ok</button>

Или более общий способ

input[type=submit].hide,
button[type=submit].hide {
    display: block;
    position: absolute;
    visibility: hidden;
}

<input type="submit" class="hide">Go</input>

Это в основном скрывает элемент в поле зрения, нет необходимости выталкивать его за пределы экрана

Answer 3

Вероятно, "особенность" безопасности, хотя я еще не нашел однозначного объяснения. Я попытался http://jsfiddle.net/B59rV/2/ без поля пароля, и предупреждение происходит, как и ожидалось. То же самое происходит в IE8 за то, что он стоит. Это единственные браузеры, которые у меня есть на этой машине, поэтому не тестировались ни на каких других.

Answer 4

Лучший способ сделать это:

<input type="submit" hidden/>

Пример:

<form onSubmit="event.preventDefault(); alert('logging in!')">
  <label for="email">email:</label>
  <input type="email" name="email" required/>

  <label for="password">password:</label>
  <input type="password" name="password" required/>

  <input type="submit" hidden/>

  <p>Press enter to log in</p>
</form>

Answer 5

Это похоже на ответ Пиула, но мне нужно было сделать следующее для элемента input [type = file] :

position:absolute; //this helps the "hidden" element not disrupt the layout
width:0;
height:0;
// For <= IE7 a 1px piece of the form element still shows
// hide it with opacity=0; Tested element was input:file.
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

НЕ протестировано с input [type =текст]

Еще один подход, но я не думаю, что это намного лучше, чем принятый ответ.

Answer 6

Единственный обходной путь, который я нашел, по крайней мере такой же грязный, как размещение его за пределами экрана, это width:0; height:0;: почему-то Chrome не интерпретирует его как скрытый элемент