JQUERY: добавить крошечную стрелку рядом со следующим полем в этой форме на фокус

Question

Я пытаюсь выразить в Jquery следующее:

Я хочу показать крошечную стрелку рядом со следующим вводом / выбором справа, чтобы каждый пользователь знал, куда идти дальше.

Чтобы выразить точный порядок, я пытаюсь заставить пользователей следовать при заполнении формы, используя цифры в имени поля, чтобы вы могли понять порядок.

Форма: http://jsfiddle.net/yqh5V/1/

Пожалуйста, РАСШИРИТЕ jsfiddle html, чтобы вы могли правильно отображать форму с полями и т.д.

Крошечная зеленая стрелка: http://i53.tinypic.com/f1ystu.png

Я не могу сделать это, не поместив стрелку вправо и не испортив поля.

Понятно, что я хочу сделать?

Answer 1

Я согласен, что добавление стрелки будет мешать с полями и т. Д.

Почему бы не сделать что-то еще, например изменить границу на input / select и, возможно, фон тоже?Примерно так

$('input, select').focus(function(){
    $(this).css({'border' : '2px solid green' , 'background' : '#999'});
});

$('input, select').blur(function(){
    $(this).css({'border' : 'none' , 'background' : 'none'});
});

http://jsfiddle.net/jasongennaro/yqh5V/3/

Answer 2

Это выполнимо в jQuery. Сначала определите css для вашей стрелки, например,

        img.arrow{ position: absolute; } 

, поэтому при добавлении в документ это не повлияет на интервал вашей формы. Затем сделайте что-нибудь в этом направлении в jQuery

        var arrow = $('img.arrow');

        $('input').focus(function(){
             arrow.remove();
             $(this).traverseToNext('input').prepend(arrow);
        });

TraverseToNext не является реальным оператором jQuery. Если вам нужна помощь в получении jQuery для нацеливания на ваше следующее поле ввода, ознакомьтесь с описанием здесь http://api.jquery.com/category/traversing/. Все, что вам нужно сделать, - это найти способ сообщить jQuery, как перейти к следующему входу из текущего. Он должен добавить изображение стрелки прямо перед полем ввода внутри вашего

        <div class="editor" />

Ура!