Нажмите кнопку запуска триггера

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

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

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

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

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

Спасибо.

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

Спецификация HTML5 явно указывает, что происходит в implicit submissions:

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

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

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

Изменить для добавления:

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

Ответ 3

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

В соответствии с html 5 spec для кнопок кнопка без атрибута типа обрабатывается так же, как кнопка с ее типом, установленным как "отправить", то есть как для отправки его содержащей формы. Установка типа кнопки на "button" должна предотвращать поведение, которое вы видите.

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

Ответ 4

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

См. пример здесь.

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

Но зачем вам нажимать Enter в текстовом поле? Если вы хотите отправить форму, нажав '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`*/
});

Ответ 5

Вы можете использовать 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>

Нажатие кнопки ввода еще вызовет отправку формы, но javascript не позволит ей фактически отправить, пока вы на самом деле не нажмете кнопку.

Ответ 6

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

Ответ 7

Я бы сделал следующее: В обработчике события onclick кнопки (не отправляйте) проверьте код события объекта события. Если это "enter", я бы вернул false.

Ответ 8

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