Введите триггеры нажмите кнопку

Question

У меня есть страница с двумя кнопками. Один элемент <button>, а другой - <input type="submit">. Кнопки отображаются на странице в указанном порядке. Если я располагаюсь в текстовом поле в любом месте формы и нажимаю <Enter>, срабатывает событие кнопки click элемента. Я предполагаю, что это потому, что элемент кнопки сидит первым.

Я не могу найти ничего похожего на надежный способ установки кнопки по умолчанию, и я не хочу этого делать на данный момент. В отсутствие ничего лучшего, я захватил в любом месте на нажатие форме и, если это был <Enter> ключ, который был нажат, я просто отрицая его:

$('form').keypress(function(e) { 
    var code = e.keyCode || e.which; 

    if(code === 13) { 
    e.preventDefault(); 
    return false; 
    } 
}) 

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

Спасибо.

Answer 1

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

Answer 2

Я бы сделал это следующим образом: в обработчике события onclick кнопки (не отправляйте) проверьте код события объекта события. Если это «введите», я вернусь к ошибке.

Answer 3

Вы можете использовать javascript для отправки формы формы до соответствующего времени. Очень грубый пример:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html"> 

    <input type='text' name='txtTest' /> 

    <input type='button' value='Submit' 
     onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' /> 

</form> 

Нажатие Enter еще вызовет форму для отправки, но Javascript будет держать его от фактически подачи, пока вы не нажмете кнопку.

Answer 4

Важно прочитать спецификации HTML, чтобы действительно понять, какое поведение следует ожидать:

HTML5 spec explicitly states what happens in implicit submissions:

кнопку элемента формы по умолчанию кнопка первого представить в порядке дерева, чья форма владелец - это элемент формы.

Если пользовательский агент поддерживает предоставление им неявно (например, на некоторых платформах, нажимающих клавишу «ввести», в то время как текстовое поле сфокусировано неявно представляет форму), сделайте это для формы, по умолчанию имеет определенное поведение активации, которое должно заставить пользовательский агент запускать синтетические шаги активации щелчка по этой кнопке по умолчанию.

Это не было указано явно в спецификации HTML4, однако в браузерах уже реализовано то, что описано в спецификации HTML5 (именно поэтому оно включено явно).

Изменить, чтобы добавить:

Самый простой ответ, который я могу думать о том, чтобы положить ваши кнопки отправки в качестве первого [type="submit"] элемента в форме, добавить отступ в нижней части формы с помощью CSS и абсолютно позиционировать представить в нижней части, где вы хотите.

Answer 5

Нажав «Enter» на сфокусированном <input type="text">, вы запускаете событие «щелчок» на первом позиционированном элементе: <button> или <input type="submit">. Если вы нажмете «Enter» в <textarea>, вы просто создадите новую текстовую строку.

См. Пример here.

Ваш код предотвращает создание новой текстовой строки в <textarea>, поэтому вам нужно нажать клавишу только для <input type="text">.

Но зачем вам нужно нажимать Enter в текстовом поле? Если вы хотите отправить форму, нажав «Ввод», но <button> должен оставаться первым в макете, просто сыграйте с разметкой: поместите код <input type="submit"> до <button> и используйте CSS, чтобы сохранить необходимый макет.

Ловля 'Enter' и сохранение разметки:

$('input[type="text"]').keypress(function (e) { 
    var code = e.keyCode || e.which; 
    if (code === 13) 
    e.preventDefault(); 
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/ 
}); 

Answer 6

Я не думаю, что вам нужно Javascript или CSS, чтобы исправить это.

В соответствии с html 5 spec for buttons кнопка без атрибута типа обрабатывается так же, как кнопка с ее типом, установленным как «отправить», то есть в качестве кнопки для отправки своей содержащей формы. Установка типа кнопки на «кнопку» должна предотвращать поведение, которое вы видите.

Я не уверен в поддержке браузера для этого, но такое же поведение было указано в html 4.01 spec for buttons, поэтому я ожидаю, что это очень хорошо.

Answer 7

Использование

<button type="button">Whatever</button> 

должен сделать трюк.

Причина в том, что кнопка внутри формы имеет тип, неявно установленный на submit. Как говорит zzzzBoz, Spec говорит, что первый button или input с type="submit" - это то, что срабатывает в этой ситуации. Если вы специально установили type="button", тогда он будет удален из рассмотрения браузером.

Answer 8

Я добавил кнопку типа «submit» в качестве первого элемента формы и сделал ее невидимой (width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Работает как обновление сайта, т. Е. Я ничего не делаю, когда кнопка нажата, за исключением того, что сайт загружен снова. Для меня отлично работает ...