it-swarm.com.ru

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

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

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

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

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

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

Кто-нибудь знает о более сложной технике для этого?

Точно так же, есть ли подводные камни в этом решении, о которых я просто не знаю?

Благодарю.

140
Rob Wilkerson

С помощью

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

должен сделать свое дело.

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

309
Maddog

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

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

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

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

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

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

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

49
zzzzBov

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

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

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

19
Leinster

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

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

Ваш код не позволяет сделать новую текстовую строку в <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`*/
});
9
Feniks502

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

2
Dave

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

1
Sparafusile

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

0
Ramki

Дом пример

  <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 (), сработают другие кнопки.

0
Mehmet Kus

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

0
Satyajit

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

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

0
Dan Vachon