Найдите следующий ближайший настраиваемый элемент, используя jquery?

Я хочу, чтобы в моих текстовых полях была функция, которую каждый раз, когда пользователи нажимают кнопку ввода, она будет фокусироваться на следующем ближайшем элементе: вход, флажок, кнопка, радио, выбор, а, div), если они могут быть сфокусированы, Как это сделать с помощью jquery?

Ответ 1

Я уже это делал раньше. Попробуйте мое решение здесь http://jsfiddle.net/R8PhF/3/

$(document).ready(function(){
    $('#mytextbox').keyup(function(e){
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) {
            var tabables = $("*[tabindex != '-1']:visible");
            var index = tabables.index(this);
            tabables.eq(index + 1).focus();
        }        
    });
});

Ответ 2

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

Я обратился к этому требованию, построив свою форму с помощью DIVs с contenteditable = true, как в примере ниже.

<html>
<head>
  <style type="text/css">

    div.input { border:1px solid #aaa; width:300px; }

  </style>

</head>
<body>

    <div contenteditable="true" class="input"><strong>explore the world,</strong> e.g. paris, france</div>

</body>
</html>

Вы можете захватить ключевое событие для ENTER и просто установить фокус на следующем брате, используя JQuery.

Сообщите мне, если вам нужно дополнительное разъяснение.

Надеюсь, это поможет. Удачи.

Ответ 3

Алгоритм-накрест:

Сохраните список всех элементов, которые можно сфокусировать. Не используйте не для DOM. Вы должны сохранить список самостоятельно. Если вы не знаете, какие элементы находятся на странице, вы уже сделали что-то неправильно. DOM - это не хранилище данных, поэтому рассматривайте его соответствующим образом. Многие новички, которые используют jQuery, делают эту ошибку, и с jQuery эту ошибку легко сделать.
Найдите позицию всех сосредоточенных элементов на странице. В соответствии с 1. лучшим способом является, конечно, знать относительное положение всех элементов, даже не глядя на DOM. С помощью jQuery вы можете использовать .dimension(). Возможно, вам придется выполнить некоторую бухгалтерию, чтобы обновлять этот список (т.е. Когда ваши данные/вид меняются).
Найдите позицию текущего сфокусированного элемента.
Используйте некоторый алгоритм, чтобы сравнить его с вашим списком других позиций и получить самое близкое (это может означать много вещей, вы, вероятно, знаете, что хотите).
Затем установите фокус на элемент.

Есть много вариантов, которые вы можете сделать здесь, некоторые зависят от производительности, другие зависят от взаимодействия и дизайна интерфейса.