Как зафиксировать нажатие клавиши ввода на страницах, содержащих несколько форм?

Question

Я унаследовал веб-приложение, в котором обычная возможность нажать клавишу возврата в любом из полей ввода была отключена по той очень веской причине, что страница содержит несколько форм, и приложение не сможет определить (или Мне сказали) какая форма к действию. Приложение было разработано таким образом, что в нем нет кнопок отправки (как в input type = "submit"), и вместо этого дизайнеры перешли к обработке клика. Вот две кнопки, которые определены на одной из страниц, включены для иллюстрации

<input type="button" value="LOGIN"  name="btnLoginOk" onclick="submit(); />"

<input type="button" class="button-click-grey" value="Find Link Partners"  
    onclick="raiseEvent('SubmitForm','',this);" style="cursor:pointer;" />

Но я действительно хочу, чтобы пользователи могли нажимать клавишу возврата, если они того хотят. если они только что ввели в поле, связанное с ЛОГИНОМ, обнаружите это и выполните действие onclick = "submit ();"

Возможно, есть решение с помощью jQuery.

Answer 1

страница содержит несколько форм, а приложение не сможет определить (или, как мне сказали), который Форма к действию.

Когда вы нажимаете ввод на элементе управления вводом, браузер ищет первую кнопку отправки в этой форме и имитирует щелчок по ней. В случае нескольких кнопок первая будет нажата при вводе с клавиатуры (это ни в коем случае не написано на камне, и браузеры могут отклоняться от этого).

Если у вас есть две формы, та, которая получила нажатие клавиши, будет иметь , это первая нажатая кнопка отправки. Поэтому вам не нужно особой обработки этого. Вы просто должны перестать мешать.

Вы можете смоделировать это в коде, на форме:

 $( 'form' ).bind('keypress', function(e){
   if ( e.keyCode == 13 ) {
     $( this ).find( 'input[type=submit]:first' ).click();
   }
 });

Или окно (для демонстрации того, что примерно происходит):

 $( window ).bind('keypress', function(e){
   if ( $( e.originalTarget ).is( ':input' ) && e.keyCode == 13 ) {
     $(  e.originalTarget )
       .closest( 'form' )
         .find( 'input[type=submit]:first' )
           .click();
   }
 });

Если, конечно, .preventDefault() не было вызвано для события.

Итог: если у вас есть событие, вы можете угадать от него, от какого элемента оно пришло и, следовательно, к какой форме оно принадлежит. Даже в этом случае:

<input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();">

Здесь submit() - глобальная функция, но когда она вызывается, ее контекст (this) будет элементом, и вы можете сделать submit(e){ this.form.submit(); }.

Приложение разработано таким образом, что нет кнопок отправки (как при вводе type = "submit"), и, вместо этого, дизайнеры пошли на обработку по клику.

Для меня это звучит так, будто дизайнер не в полной мере понимает события DOM / формы и решает проблему. Другая вероятная причина может заключаться в том, что программа устарела и была разработана тогда, когда эти вещи были не настолько стабильны или не были должным образом документированы, как сегодня.

Заменить это:

<form action="/login/" method="POST">
  [...]
  <input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();">
</form>

С этим:

<form action="/login/" method="POST">
  [...]
  <input type="submit" value="LOGIN" name="btnLoginOk">
</form>

Затем добавьте обработчик ключа ко всем формам, которые в нем нуждаются, который обнаруживает и подавляет ввод, если выполняется какое-то условие (для форм, для которых вы действительно хотите отключить это).

// for all forms that POST that have 2+ submit buttons
$( 'form[method=post]:has(:submit:eq(1))' ).bind('keydown', function(e){
  // if target is an enter key, input element, and not a button
  if ( e.keyCode == 13 && e.target.tagName == 'INPUT' && 
       !/^(button|reset|submit)$/i.test( e.target.type ) ) {
    return false;  // kill event
  }
});

Или, что еще лучше: используйте библиотеку проверки формы (или плагин jQuery), которая знает, как это сделать.

Answer 2

Вы можете связать событие нажатия клавиши для клавиши Enter в jquery:

$("form").bind("keypress", function(e) {
   if (e.keyCode == 13) {
      your_custom_submit_function();
      return false; // ignore the default event
   }
});

Answer 3

Я не думаю, что вам нужен jQuery или javascript для этого. Вы действительно можете определить, в какую форму пользователь нажимает кнопку «Отправить», или даже в какую кнопку «Отправить» нажимают (в случае, если в каждой форме более одной кнопки «Отправить»).

Вот код, который вы бы использовали:

<form action="http://foo.com/uri" method="POST">
  <input type="submit" name="action1a" value="add" />
  <input type="submit" name="action1b" value="delete" />
</form>
<form action="http://foo.com/uri" method="POST">
  <input type="submit" name="action2a" value="add" />
  <input type="submit" name="action2b" value="delete" />
  <input type="submit" name="action2c" value="someOtherAction" />
</form>

Затем для скрипта обработки формы вы просто проверите имя кнопки отправки, например:

if (isset($_POST['action1a'])) ... // PHP syntax

Кроме того, вы можете использовать изображения в качестве кнопок отправки, затем вы можете использовать одно и то же имя для всех кнопок отправки и просто проверить их значения - вы также можете сделать это с помощью обычных кнопок отправки, если каждая кнопка имеет уникальный value приписывать. <ч /> Редактировать: Еще один метод состоит в том, чтобы объединить значения POST и GET, т. Е .:

<form action="http://foo.com/uri?form=1" method="POST">
  <input type="submit" name="action" value="add" />
  <input type="submit" name="action" value="delete" />
</form>
<form action="http://foo.com/uri?form=2" method="POST">
  <input type="submit" name="action" value="add" />
  <input type="submit" name="action" value="delete" />
</form>

Answer 4

Скрестив пальцы, это сработает

$(document).ready(function() {
  var focussed_form;
  $('input').focus(focus_form);
  $('input').blur(unfocus_form);
  $('textarea').focus(focus_form);
  $('textarea').blur(unfocus_form);
  $('select').focus(focus_form);
  $('select').blur(unfocus_form);

  $(document).keypress(function(e) {
    if(e.keyCode == 13) 
    {
      $(focussed_form).trigger('submit'); 
    }
  });

  function focus_form(){
    focussed_form = $(this).closest('form');
  }

  function unfocus_form(){
    focussed_form = NULL;
  }

});