2

Не использую формы и вместо кнопок использую оформленные css-ом ссылки. Встает вопрос юзабилити, когда надо к примеру ввести логин и пароль в модальном окне и не переводя фокус из инпута нажав enter отправить данные на валидацию.

Вопрос как это удобнее реализовать, учитывая тот факт, что таких сетов в виде инпутов и дефолтной ссылки будет много. К примеру если присваивать одинаковые классы сету, то надо писать n-обработчиков на n-сетов. А хотелось бы один.

UPD Пока, что в голову пришел вариант отлавливать инпуты с фокусом и искать сестринский элемент ссылки-кнопки с классом default.

Минус: необходимо, чтобы они были "братьями" или хотя бы имели общего родителя, что не всегда удобно.

UPD Пока, что такое решение

4 ответа 4

3
$('input, textarea').live('keyup', function(e){
    if(
        (this.nodeName == 'input' && e.keyCode == 13) ||
        (this.nodeName == 'textarea' && e.keyCode == 13 && e.ctrlKey)
    ){
        $(this).parents('form').eq(0).submit();
    }
});

Ловит input'ы и textarea в формах. Textarea отправляют только при зажатом ctrl.

5
  • Солидарен, абсолютно непонятно зачем вешать обработчик на все =\
    – user3545
    13 янв 2012 в 10:18
  • С $('input, textarea') совершенно согласен. А вот $(this).parents('form').eq(0).submit();, похоже, что совсем не то что нужно ТС: > Не использую формы и вместо кнопок использую оформленные css-ом ссылки. 13 янв 2012 в 13:52
  • Это уже религиозные предпочтения ТСа и ИМХО в этом нет никакого выйграши и смысла соответственно тоже
    – user3545
    13 янв 2012 в 13:58
  • >совсем не то что нужно ТС Упс, пропустил. =( А тогда я не понимаю, каким образом ТС отправляет форму. Откуда action берется?
    – ling
    13 янв 2012 в 14:05
  • > А тогда я не понимаю, каким образом ТС отправляет форму. Откуда action берется? Насколько я понял просто должно вызываться событие, которое повешено на какую-либо ссылку. 13 янв 2012 в 15:04
3

Пока получилось как-то так:

  $("*").keypress(function(event) {  
      if ( event.which == 13 && !(event.ctrlKey))  {             
         $("input:focus").parent().find(".default").click(); 
         $("textarea:focus").parent().find(".default").click(); 
      }   
  });

//Переопределяет enter для textarea на Ctrl+enter 
$("*").keypress(function(event) {
  if(event.ctrlKey && event.which==13)
    $("textarea:focus").val($("textarea:focus").val()+"\n");
});
3
  • 2
    Неплохое решение, но есть пару замечаний: 1. Вместо $("input:focus") и $("textarea:focus") правильнее было бы использовать $(this) 2. Помимо ctrlKey, по хорошему, так же нужно проверять altKey и shiftKey, т.к. shift + enter так же иногда используется для переноса строки. 3. Так нужно вызывать event.preventDefault(), что бы отменить событие по умолчанию. 13 янв 2012 в 9:18
  • Спасибо большое - учту. Но с третим вариантом немного непонятно. Какое именно событие по умолчанию у textarea - это перенос строки по нажатию enter? Да и вообще примерчик бы небольшой не помешал бы.
    – culebre
    13 янв 2012 в 9:28
  • > Какое именно событие по умолчанию у textarea - это перенос строки по нажатию enter? У textarea то перенос строки, а вот у input'а отправка текущей формы формы. Сейчас пример набросаю. 13 янв 2012 в 13:48
2
$('input, textarea').live('keydown', function(e) {
    if (e.which != 13 || e.ctrlKey || e.shiftKey || e.altKey) {
        return;
    }

    e.preventDefault();
    $(this).parent('.container').find('.default').click();
});

Где .container это родительский элемент вашей "формы".

А вместо костыля с добавлением '\n' по ctrl + enter я бы рекомендовал использовать shift + enter, тогда никаких дополнительных манипуляций не потребуется.

1
  • Да уже, собственно, так и сделал.
    – culebre
    16 янв 2012 в 6:04
1

Создай скрытый элемент с типом submit и не мучайся.

<input type="submit" style="display: none" />

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.