Введіть натискання кнопки тригерів

У мене є сторінка з двома кнопками. Один - <button>елемент, а інший - а <input type="submit">. Кнопки з’являються на сторінці в такому порядку. Якщо я перебуваю в текстовому полі де-небудь у формі і натискаю <Enter>, clickподія елемента кнопки запускається. Я припускаю, що тому, що елемент кнопки сидить першим.

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

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

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

Наскільки я можу сказати досі, це, здається, працює, але відчувається неймовірно кулаком.

Хтось знає про більш досконалу техніку цього?

Так само, чи є якісь підводні камені цього рішення, про які я просто не знаю?

Дякую.

Використання

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

повинен зробити трюк.

Причина полягає в тому, що кнопка всередині форми має неявний параметр submit. Як каже zzzzBoz, Spec каже, що перший buttonабо inputз type="submit"тим, що спрацьовує в цій ситуації. Якщо ви спеціально встановили type="button", він видаляється з розгляду браузером.

Важливо прочитати специфікації HTML, щоб по-справжньому зрозуміти, якої поведінки слід очікувати:

Специфікація HTML5 чітко визначає, що відбувається вimplicit submissions :

Кнопка за замовчуванням елемента елемента - це перша кнопка подання у порядку дерева, власником форми є цей елемент форми.

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

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

Редагувати, щоб додати:

Найпростіша відповідь, яку я можу придумати, - це поставити кнопку подання як перший [type="submit"]елемент у формі, додати підкладку в нижній частині форми з допомогою css і абсолютно розмістити кнопку подання в нижній частині, де вам це сподобається.

Я не думаю, що для виправлення цього вам потрібен JavaScript або CSS.

Згідно з специфікацією html 5 для кнопок, кнопка без атрибуту типу трактується так само, як кнопка з її типом, встановленою на "подати", тобто як кнопка для подання форми, що містить її. Встановлення типу кнопки на "кнопку" повинно запобігати поведінці, яку ви бачите.

Я не впевнений у підтримці браузера для цього, але така ж поведінка була визначена в специфікації 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" та збереження розмітки:

$('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`*/
});

Де б ви ніколи не використовували <button>елемент за замовчуванням, він вважає цю кнопку, type="submit"тому якщо ви визначите її, type="button"то вона не вважатиме це <button>кнопкою подання.

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

Ви можете використовувати 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>

Натискання клавіші Enter все ще призведе до подання форми, але javascript убереже її від фактичного подання, поки ви фактично не натиснете кнопку.

Приклад Дому

  <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.
}

якщо ви не використовуєте prevenDefault (), спрацюють інші кнопки.

Я б це зробив так: У обробнику кнопки події onclick (не подати) перевірте код ключа об'єкта події. Якщо це "enter", я б повернув false.

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

Це єдине, що досі працювало на мене.

Можна зробити щось подібне.

прив’яжіть свою подію до загальної функції та зателефонуйте на подію натисканням клавіші або натисканням кнопки.

наприклад.

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

Я додав кнопку першого типу "подати" як перший елемент форми і зробив її невидимою ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Працює як оновлення сайту, тобто я нічого не роблю при натисканні кнопки, за винятком того, що сайт завантажується знову. Для мене прекрасно працює ...