Найдите следующий ближайший настраиваемый элемент, используя 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(). Возможно, вам придется выполнить некоторую бухгалтерию, чтобы обновлять этот список (т.е. Когда ваши данные/вид меняются).

  • Найдите позицию текущего сфокусированного элемента.

  • Используйте некоторый алгоритм, чтобы сравнить его с вашим списком других позиций и получить самое близкое (это может означать много вещей, вы, вероятно, знаете, что хотите).

  • Затем установите фокус на элемент.

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