Получить фокус (или прокрутить в вид) на панель с помощью jquery - PullRequest
0 голосов
/ 25 июня 2019

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

Я могу сфокусироваться на радиокнопке и сделатьстраница, чтобы перейти к ней, но хотите, чтобы родитель panel-body сфокусировался на странице, как scrollintoview(), но это не работает.

также использовал .parents(".panel-body") до того, как .focus() также не работает .. ``

<div class="panel-body">
    <div class="input-opt">
        <p>Select options..</p>
        <div rel="tool-tip">
            <div class="radio">
                <label class="lead">
                    <input id="rad1" tabindex="1" required="required" value="one" type="radio">
                    one
                </label>
            </div>
            <div class="radio">
                <label class="lead">
                    <input id="rad2" tabindex="1" required="required" value="two" type="radio">
                    two
                </label>
            </div>

            <div class="radio">
                <label class="lead">
                    <input id="rad3" tabindex="1" required="required" value="three" type="radio">
                    three
                </label>
            </div>
        </div>
    </div>
</div>

button.addEventListener("click", function () {
    var ncyc = $("input[value='two']:checked").length;
    $("input[value*='two']:checked:eq(" + target + ")").focus().keyup();

    target = target + 1;
    if (target == ncyc) {
        target = 0;
    }
});

Приведенный выше код позволяет фокусироваться только на переключателе ... когда не используется .parents (". Panel-body ") ...... я хочу весь divбыть в видимой рамке

Ответы [ 2 ]

1 голос
/ 27 июня 2019

Если вы не можете изменить html-файл, вы можете перейти к вашему div, используя такой подход:

//your stuff goes here
$('html, body').animate({ scrollTop: $('.panel-body').offset().top }, 'fast');
1 голос
/ 25 июня 2019

Если родительский элемент <div>, ему необходим атрибут tabindex. Попробуйте вот так

$("input[value*='three']:checked:eq(" + target + ")")
.parent(".panel-body").attr("tabindex",-1).focus();

или добавьте атрибут tabindex в html-тег, например

<div class="panel-body" tabindex="-1">
</div>

и используйте в своем коде как старое выражение:

$("input[value*='three']:checked:eq(" + target + ")").parents(".panel-body").focus();

ОБНОВЛЕНИЕ: * Если вы не хотите менять html, вы можете сделать то же самое с помощью кода jquery, как показано ниже

$("input[value*='three']:checked:eq(" + target + ")").parents(".panel-body").attr('tabindex','-1').focus();
...