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

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

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

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

должно помочь.

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

Answer 2

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

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

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

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

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

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

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

Answer 3

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

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

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

Answer 4

Нажав «Enter» на сфокусированном <input type="text">, вы запускаете событие «щелчка» на первом позиционированном элементе: <button> или <input type="submit">. Если вы нажмете «Ввод» в <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`*/
});

Answer 5

Где бы вы ни использовали элемент <button> по умолчанию, он считает эту кнопку type="submit", поэтому, если вы определите кнопку type="button", она не будет считать <button> кнопкой отправки.

Answer 6

Вы можете использовать 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 не позволит отправить ее до тех пор, пока вы фактически не нажмете кнопку.

Answer 7

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

Answer 8

Дом пример

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

Javascript

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

Если вы не используете protectDefault (), сработают другие кнопки.

Answer 9

В моей ситуации есть две кнопки Submit внутри элемента формы: Update и Delete.Кнопка Delete удаляет изображение, а кнопка Update обновляет базу данных текстовыми полями в форме.

Поскольку кнопка Delete была первой в форме, она была кнопкой по умолчанию для Enter ключ.Не то, что я хотел.Пользователь может ожидать нажатия Enter после изменения некоторых текстовых полей.

Я нашел свой ответ на установку кнопки по умолчанию здесь :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

Не используя скрипт, я определил форму, которой принадлежит каждая кнопка, используя атрибут <button> form="bla".Я установил для кнопки Delete форму, которой не существует, и для кнопки Update, которую я хотел нажать на кнопке Enter, форму, в которой пользователь будет находиться при вводе текста.

Это единственное, что до сих пор работало на меня.

Answer 10

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