Событие нажатия кнопки срабатывает при нажатии клавиши Enter в другом поле ввода (без форм)

111

Эта логика срабатывает при нажатии «Enter» на входе «Amount», и я не верю, что это должно быть (в Chrome этого нет). Как я могу предотвратить это, и если не предотвратить это в IE, обработайте это так, чтобы логика в событии щелчка не срабатывала.

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

Сценарий

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • Jquery: 1.7.2
  • IE 9
  • (Работает в Chrome)
jquery internet-explorer контакты
источник
1
Вопреки вопросу, это случилось со мной только с Chrome и Firefox. То же самое исправление (тип кнопки).
Тим Грант,

Ответы:

324

У меня была та же проблема, и я решил ее, добавив type="button"атрибут к <button>элементу, благодаря которому IE считает кнопку простой кнопкой, а не кнопкой отправки (что является поведением <button>элемента по умолчанию ).

Паллати
источник
6
У меня была такая же проблема с Firefox. атрибут type = "button" также решил эту проблему для меня
Александр Фрадиани
109
Да проживет ты тысячу лет.
TheBrain 04
4
Отличное исправление. Я думал, что браузеры будут автоматически отправлять сообщения при нажатии «Enter» внутри тегов <form>. Но я вижу, что ошибался.
Clayton Bell
2
Дни криков на IE9 (между моими обычными криками на другие вещи, на которые я должен кричать), и это было решением. Черт возьми.
phatskat
5
За пару недель меня дважды укусила эта проблема. Просто чувствует себя странно иметь крикнуть type="button"в <button>элементе. ха-ха ... :) Надеюсь, я вспомню это в следующий раз.
Сэм
33

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

Вы должны переопределить поведение IE по умолчанию с помощью preventDefault (). В вашем селекторе jQuery вставьте div, содержащий текстовые поля, которые вы хотите игнорировать, клавишу ввода - в вашем случае, div "page". Вместо того, чтобы выбирать весь div, вы также можете указать текстовые поля, которые хотите специально игнорировать.

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});
Кристиан Клинтон
источник
Лучшее решение, когда вам нужно использовать пользовательские компоненты, а вы не можете добавить type = "button".
FireZenk
Спасибо Клинтон, у меня это сработало. Сначала я попытался сделать все кнопки типа «кнопка», но это не сработало. Затем мне пришлось подавить всплытие событий при нажатии клавиши ввода.
Рупеш Кумар Тивари
Огромное спасибо. Я бушевал за компьютером последние 2 часа.
Эдвин
4

У меня возникла проблема с ASP.NET WebForms:

<asp:Button />

Этого НЕЛЬЗЯ решить, просто добавив type = "button", потому что ASP.NET заменяет его на type = "submit" (вы можете увидеть это поведение в браузере, если проверите элемент).

Правильный способ сделать это в asp.net - добавить 

<asp:Button UseSubmitBehavior="false" />

к кнопке. ASP автоматически добавит атрибут type = "button".

Гильерме
источник
2

IE считает, что любой buttonэлемент является кнопкой отправки (независимо от того, есть она у вас formили нет). Он также обрабатывает нажатие Enterклавиши в элементе формы как неявную отправку формы. Итак, поскольку он думает, что вы пытаетесь отправить свою форму, он полагает, что поможет вам и запустит clickсобытие (то, что он считает) кнопкой отправки .

Вы можете прикрепить keyupсобытие к inputили к buttonи проверить наличие Enterключа ( e.which === 13) иreturn false;

Обезьяна-еретик
источник
1

Решение на основе jQuery, которое делает это для каждой кнопки:

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

Однако по какой-то причине событие щелчка по-прежнему всплывает до родительских элементов ...

lschult2
источник
0

Для Chrome вы можете добавить, <button type="submit" style="display:none"/> потому что в Chrome тип кнопки по умолчанию - «отправить»

Для IE я попытался сделать то же самое с type="button"(в IE тип кнопки по умолчанию - «кнопка»), но не сработал.

Итак, вот решение. В HTML добавьте (keypress)=xxx($event)в свою форму. В ТС,

xxx(event) {
 if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}

Вышеупомянутое будет работать во всех сценариях, таких как кросс-браузеры, обычный щелчок и перемещение вкладок.

Тамильский.S
источник