2014-10-31 6 views
0

Я пытаюсь создать простую форму отправки в WYSIWYG Web Designer 10, но у меня есть БОЛЬШАЯ проблема с клавишей Enter. В форме есть несколько полей редактирования, и я хотел бы иметь следующую функциональность (через JavaScript): 1. Введите ключ в поле «Редактировать», не должны отправлять форму. 2. Введите ключ в поле редактирования, чтобы установить фокус на следующий элемент (окно редактирования или кнопка отправки). Кнопка Submit - последний элемент в порядке tabIndex. 3. Чтобы отправить форму, пользователь должен: либо нажать кнопку отправки, или нажать Enter, когда кнопка отправки имеет фокус. 4. Должен работать в любом браузере.JavaScript & отправить форму & Enter & set focus to next element

Это фрагмент, который работает очень хорошо (она устанавливает фокус на следующий элемент):

 var elem = document.activeElement; 
 
    
 
     var tidx = +(elem.getAttribute('tabindex')) +1, 
 
      elems = document.getElementsByTagName('input'); 
 

 
     for (var i=elems.length; i--;) 
 
      { 
 
      var tidx2 = elems[i].getAttribute('tabindex'); 
 
      if (tidx2 == tidx) elems[i].focus(); 
 
      }

Единственная проблема у меня есть Введите ключ (KEYCODE) проверки, которая должна перед кодом изменить фокус. Я тестировал FF 32, PaleMoon 25 (клон FF), Chrome 38 & IE 10.

Большое спасибо за ваше время заранее.

P.S. Я новичок в JavaScript. Я использую для работы с MS Access, где подобная проблема будет решена в течение двух минут. Я потратил несколько часов на эту простую задачу, но не повезло. Я попробовал много примеров, которые я нашел в Интернете (включая stackoverflow.com). Что касается события обработки (где я пытаюсь проверить keyCode), различные браузеры ведут себя по-разному.

+1

Что неправильно использовать клавишу TAB для перехода к следующему полю? –

+1

Вы понимаете, что подобный подход подрывает установленный пользовательский интерфейс, с которым ваши пользователи уже знакомы, форм HTML? Если вы явно не подписываете эту реализацию * и * пользователи просили об этом, подумайте об этом. Кстати, вам действительно нужно добавить HTML в свой фрагмент, чтобы сделать этот код значимым. –

+0

@ Weather Vane: пользователи продолжают нажимать Enter вместо Tab. – StreamLine

ответ

0

Я пробовал и смешивал много всего в сети и создал этот. До сих пор это работает для меня ... просто дать ему попробовать

$(document).on('keypress', 'input, select, checkbox, radio, button', function (e) { 
    return focusNextOnEnter(e, this); 
}) 

и функцию где-то в вашем файле JS.

function focusNextOnEnter(e, selector) { 
    var longSelector = 'input:visible:enabled:not([readonly="readonly"]), textarea:visible:enabled:not([readonly="readonly"]), select:visible:enabled, button:visible:enabled'; 
    var keyCode = e.keyCode || e.which; 
    if ($(selector).is(':not(textarea)') // it's not a textarea - enter in text area 
      && keyCode === 13 // it's enter key 
      && !($(selector).attr('id') === 'submitButton')) // it's not submitButton, save-on-enter here 
    { 
     e.preventDefault(); 
     $(longSelector)[$(longSelector).index($(selector)) + 1].focus(); 
     return true; 
    } 
} 

вместо последней проверки

$(selector).attr('id') === 'submitButton' 

вы всегда можете проверить

$(selector).is('[type="submit"]') 

это, мы надеемся вернуть то, что вы ищете то подать на кнопку ввода на отправить