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