У меня есть страница с двумя кнопками. Один элемент <button>, а другой - <input type="submit">. Кнопки отображаются на странице в указанном порядке. Если я располагаюсь в текстовом поле в любом месте формы и нажимаю <Enter>, срабатывает событие кнопки click. Я предполагаю, что, поскольку элемент кнопки сидит первым.
Я не могу найти ничего похожего на надежный способ установки кнопки по умолчанию, и я не хочу этого на данный момент. В отсутствие чего-то лучшего я захватил нажатие клавиши в любом месте формы, и если бы это был нажатый клавишей <Enter>, я просто отрицаю это:
$('form').keypress( function( e ) {
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
return false;
}
})
Насколько я могу судить до сих пор, кажется, что он работает, но он чувствует себя невероятно возбужденным. Кто-нибудь знает более сложную технику для этого? Точно так же есть ли какие-либо подводные камни для этого решения, о которых я просто не знаю?
Спасибо.
Использование
<button type="button">Whatever</button>
должен сделать трюк.
Причина в том, что кнопка внутри формы имеет свой тип, неявно установленный на submit. Как говорит zzzzBoz, Spec говорит, что первый button или input с type="submit" - это то, что срабатывает в этой ситуации. Если вы специально установили type="button", то он был удален из рассмотрения браузером.
Важно прочитать спецификации HTML, чтобы действительно понять, какое поведение следует ожидать:
Спецификация HTML5 явно указывает, что происходит в implicit submissions:
Кнопка по умолчанию элемента формы - это первая кнопка отправки в древовидном порядке, владельцем формы которой является этот элемент формы.
Если пользовательский агент поддерживает разрешение неявным образом отправить форму (например, на некоторых платформах, попавших в клавишу "enter", в то время как текстовое поле сфокусировано неявно представляет форму), сделайте это для формы, по умолчанию которой есть кнопка определенное поведение активации должно приводить к тому, что пользовательский агент запускает синтетические шаги активации щелчка по этой кнопке по умолчанию.
Это не было явным в спецификации HTML4, однако в браузерах уже реализовано то, что описано в спецификации HTML5 (именно поэтому оно включено явно).
Изменить для добавления:
Самый простой ответ, который я могу придумать, - это поставить кнопку отправки в качестве первого элемента [type="submit"] в форме, добавить отступ в нижней части формы с помощью css и полностью поместить кнопку отправки внизу, d нравится.
Я не думаю, что вам нужен javascript или CSS, чтобы исправить это.
В соответствии с html 5 spec для кнопок кнопка без атрибута типа обрабатывается так же, как кнопка с ее типом, установленным как "отправить", то есть как для отправки его содержащей формы. Установка типа кнопки на "button" должна предотвращать поведение, которое вы видите.
Я не уверен в поддержке браузера для этого, но такое же поведение было указано в html 4.01 spec для кнопок, поэтому я ожидаю, что это будет хорошо.
При нажатии '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`*/
});
Вы можете использовать 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 не позволит ей фактически отправить, пока вы на самом деле не нажмете кнопку.
Нажав кнопку ввода в текстовое поле формы, по умолчанию отправьте форму. Если вы не хотите, чтобы он работал таким образом, вам нужно захватить нажатие клавиши ввода и потреблять его, как вы это делали. Об этом нет. Он будет работать таким образом, даже если в форме нет кнопки.
Я бы сделал следующее: В обработчике события onclick кнопки (не отправляйте) проверьте код события объекта события. Если это "enter", я бы вернул false.
Я добавил кнопку типа "submit" в качестве первого элемента формы и сделал ее невидимой (width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Работает как обновление сайта, т.е. Я ничего не делаю, когда кнопка нажата, за исключением того, что сайт загружен снова. Для меня отлично работает...