Сосредоточиться на следующем tabindex элемента HTML onEnter keypress от JQuery

Ответ 1

Я обнаружил пару незначительных проблем jQuery. Исправлено: JSFiddle.

Эта строка:

$('*').attr('tabindex', tabindex).focus();

можно записать следующим образом:

$('[tabindex=' + tabindex + ']').focus();

и это:

$('#Msg').text($(this).id + " tabindex: " + tabindex 
           + " next element: " + $('*').attr('tabindex').id);

не вызывает атрибут id как способ jQuery (вы используете синтаксис JavaScript, но результат $(this) является объектом jQuery. Итак... $(this).id становится $(this).attr('id').

У формы все еще есть проблема с отправкой, что я не слишком далеко зашел, но меняет фокус и теперь заполняет элемент '#Msg'.

Ответ 2

Вот мой полный рабочий код focusNextElement на keydown [Enter] без jQuery с Пример JSFiddle создается на основе следующих ответов stackoverflow:

• Как предотвратить нажатие клавиши ENTER для отправки веб-формы?
• Фокус Next Element In Tab Index

<script type="text/javascript">

    function focusNextElement() {
      var focussableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
      if (document.activeElement && document.activeElement.form) {
        var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
          function(element) {
            return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
          });
        var index = focussable.indexOf(document.activeElement);
        focussable[index + 1].focus();
      }
    }

    window.addEventListener('keydown', function(e) {
      if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName === 'INPUT' && e.target.type !== 'textarea') {
          e.preventDefault();
          focusNextElement();
          return false;
        }
      }
    }, true);

</script>

Ответ 3

Не хочу делать новую запись и делать СПАМ с помощью решения, которое я нашел полезным.

Собранную информацию из других источников (код Брайана Глаза приятный) и сделал кросс-браузерную версию Focus Next Element In Tab-index с помощью клавиши Enter.

Таб-индексы не один за другим, но могут также содержать пробел между (1,2,9,11,30 и т.д.)

var tabindex = 1; //start tabindex || 150 is last tabindex
    $(document).keypress(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13') { //onEnter
            tabindex++;
            //while element exist or it readonly and tabindex not reached max do
            while(($("[TabIndex='"+tabindex+"']").length == 0 || $("[TabIndex='"+tabindex+"']:not([readonly])").length == 0) && tabindex != 150 ){
                tabindex++;
            }
            if(tabindex == 150){ tabindex = 1 } //reseting tabindex if finished
            $("[TabIndex='"+tabindex+"']").focus()
            return false;
        }
    });

    $("input").click(function() { //if changing field manualy with click - reset tabindex 
        var input = $(this);
        tabindex = input.attr("tabindex");
    })

Я надеюсь, что кто-то найдет это полезным. Не стесняйтесь редактировать/комментировать его.

Ответ 4

var tab = $(this).attr("tabindex");
tab++;
$("[tabindex='"+tab+"']").focus();

Ответ 5

Ищем решение именно этой проблемы, я сгенерировал небольшую функцию jquery, чтобы найти следующий действующий tabindex; предположим, что это немного легче для обслуживания и, возможно, немного быстрее, чем цикл while:

function getNextTabindex(currentTabIndex) {
  return $("[tabindex]").index($("[tabindex=" + currentTabIndex + "]")) + 1;
}

Надеюсь, что это будет полезно для тех, кто в ней нуждается; это проверено и работает.

Объясняя это кратко: найдите элемент текущего tabindex, найдите этот элемент в списке всех элементов tabindex, получите его индекс и увеличьте индекс.

Затем, используя эту функцию, вы можете выбрать следующий элемент tabindex следующим образом:

$('[tabindex=' + getNextTabindex($(":focus").attr("tabindex")) + ']').focus();

Я не тестировал вызов, но предположил, что он работает.

Ответ 6

var tabindex= $(this).attr("tabindex");
tabindex++;
$("[tabindex='"+tabindex+"']").focus();

для редактируемых ячеек в таблице

    $(document).on('dblclick', 'td', function () {
        console.log('clicked');
        this.contentEditable = 'true';
    });
 $(document).on('keydown', 'td', function (event) {
        if (event.keyCode === 9 || event.keyCode === 13) {
            this.contentEditable = 'false';
            //  $(this).next().focus().dblclick().focus();
            var tabindex = $(this).attr('tabindex');
            tabindex++;
            var next = $('[tabindex=' + tabindex + ']').focus().dblclick();
            if (next.is('td') == false)
                return true;
            var sel, range;
            if (window.getSelection && document.createRange) {
                range = document.createRange();
                range.selectNodeContents(next[0]);
                range.collapse(true);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (document.body.createTextRange) {
                range = document.body.createTextRange();
                range.moveToElementText(next[0]);
                range.collapse(true);
                range.select();
            }

            return false;
        }
    });

Редактируемые ячейки в динамической таблице