Кнопка натискання події запускається при натисканні клавіші Enter в різних введеннях (без форм)

111

Ця логіка спрацьовує при натисканні клавіші "Enter" на вході "Сума", і я не вважаю, що так слід (це не в 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

4

Відмінна фіксація. Я думав, що веб-переглядачі автоматично надсилатимуть повідомлення під "Enter" лише тоді, коли всередині тегів <form>. Але я бачу, що я помилявся.

— Клейтон Белл

2

Дні кричати на IE9 (між моїми загальними криками на інші речі, на які я повинен кричати), і це було рішенням. Гаряча данга.

— phatskat

5

Укусили це питання двічі всього за пару тижнів. Просто дивно, що потрібно стикатися type="button"в <button>стихії. ха-ха ... :) Сподіваюсь, я пам’ятаю це наступним разом.

— Сем

33

Я сьогодні зіткнувся з цією проблемою. IE передбачає, що якщо натиснути клавішу введення в будь-якому з текстових полів, ви хочете надіслати форму - навіть якщо поля не є частиною форми і навіть якщо кнопка не має типу "подати".

Ви повинні перекрити поведінку за замовчуванням IE за допомогою prevenDefault (). У своєму селекторі jQuery введіть div, який містить текстові поля, які ви бажаєте проігнорувати, клавішу введення - у вашому випадку діл "сторінки". Замість вибору цілого 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

Дякую Клінтон, це працювало для мене. Я спершу спробував зробити всі кнопки типу "кнопка", все одно не вийшло. Тоді мені довелося придушити бурхливість події під час натискання клавіші Enter.

— Рупеш Кумар Тіварі

Дуже дякую. Я лютував за своїм комп’ютером останні 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"/> тому що в хромі за замовчуванням тип кнопки - "надіслати"

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

Тож ось рішення. У HTML додайте (keypress)=xxx($event)у вашу форму. У TS,

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

Вищенаведене буде працювати у всіх сценаріях, таких як перехресні веб-переглядачі, звичайні кліки та потік вкладок.

— Таміл.S
джерело