Заголовок вкладки на отделении

См. HTML-код формы ниже

<form method="post" action="register">      
    <div class="email">
        Email   <input type="text" tabindex="1" id="email" value="" name="email">                   </div>
    </div>
    <div class="agreement">
        <div tabindex="2" class="terms_radio">
            <div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;">
                <input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label>
            </div>
        </div> 
    </div>
    <div class="form_submit">
        <input type="button" tabindex="3" value="Cancel" name="cancel">
        <input type="submit" tabindex="4" value="Submit" name="submit">         
    </div>
</form>

Здесь я разработал флажок соглашения таким способом, которым полностью скрыт радио-вход, и фоновое изображение применяется к отделению обертки, и onclick отделения обертки переключит фоновое изображение, а также проверенное состояние радио-входа.

Я должен установить индекс tabindex на 'terms_radio' DIV, просто tabindex = "2", атрибут на отделении не работает,

Действительно ли возможно принести пунктирную границу на маркировке для радио-входа при нажатии TAB, когда курсор в почтовом поле ввода?

32
задан piet.t 3 February 2016 в 10:15
поделиться

1 ответ

Элементы DIV несовместимы с tabindex в HTML4 ).

( ПРИМЕЧАНИЕ Спецификация HTML 5 , однако допускает это, и обычно работает независимо от этого)

Следующие элементы поддерживают атрибут tabindex: A, AREA, BUTTON, INPUT , ОБЪЕКТ, ВЫБОР и ТЕКСТАРА.

По сути, все, что вы ожидаете от способности удерживать фокус; элементы формы, ссылки и т. д.

Я думаю, что вы, вероятно, захотите здесь использовать немного JS (я бы рекомендовал jQuery для чего-то относительно безболезненного) для привязки к событию focus на входе element и установите границу родительского div.

Прикрепите это внизу тега body, чтобы получить jQuery из Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Тогда что-то вроде этого, вероятно, поможет:

$(function() {
    $('div.radio input').bind({
        focus : function() {
            $(this).closest('div.radio').css('border','1px dotted #000');
        },
        blur : function() {
            $(this).closest('div.radio').css('border','none');
        }
    });
});
30
ответ дан 27 November 2019 в 20:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: