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 that you have read and understand our privacy policy and code of conduct.

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