对div的Tab索引 [英] Tab Index on div

问题描述

 < form method =postaction =register> 
< div class =email> 
 Email< input type =texttabindex =1id =emailvalue =name =email> < / DIV> 
< / div> 
< div class =agreement> 
< div tabindex =2class =terms_radio> 
< div onclick =changeTerm（this）; class =radioid =terms_radio_wrapperstyle =background-position：left 0pt;> 
< input type =radioid =termsvalue =1name =terms>< label for =terms>我已阅读并理解< / label> 
< / div> 
< / div> 
< / div> 
< div class =form_submit> 
< input type =buttontabindex =3value =Cancelname =cancel> 
< input type =submittabindex =4value =Submitname =submit> 
< / div> 
< / form> 
  

在这里，我设置了协议复选框，以便无线电输入完全隐藏并且背景图像是应用于包装div，onclick包装div将切换背景图像以及收音机输入的检查状态。

我需要设置tabindex索引在'terms_radio'DIV上，div上的tabindex =2属性不起作用，

是否可以在无线电输入的标签上加上虚线边框当光标在电子邮件输入字段时按住TAB键？

解决方案

DIV元素与tabindex不兼容 in HTML4 ）。

（注意 HTML 5规范不允许允许这一点，然而，它通常会起作用）

以下元素支持tabindex attr ibute：A，AREA，BUTTON，INPUT，OBJECT，SELECT和TEXTAREA。

基本上任何你期望能够容纳的东西焦点;表单元素，链接等。

我想你可能想在这里做的是使用一些JS（我会推荐 jQuery ），以便绑定到输入元素上的焦点事件并在父div上设置边界。

将它贴在身体标记的底部，以便从Google CDN获取jQuery：

 < script src =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.jstype =text / javascript>< /脚本> 
  

然后像这样的东西可能会有诀窍：

  $（function（）{
 $（'div.radio input'）。bind（{
 focus：function（）{
 $（this）.closest（'div.radio'）.css（'border'，'1px dotted＃000'）; 
}，
 blur：function（）{
 $（这个）.closest（'div.radio'）.css（'border'，'none'）; 
} 
}）; 
}）; 
  

Please see the form HTML code below

<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>

Here I styled the agreement check box in such a way that radio input is completely hidden and background image is applied to the wrapper div, and onclick of the wrapper div will toggle the background image as well as the checked status of the radio input.

I need to set the tabindex index on the 'terms_radio' DIV, simply tabindex="2" attribute on div is not working,

Is it possible to bring the dotted border on the label for the radio input up on pressing the TAB when the cursor is at email input field?

解决方案

DIV elements are not compatible with tabindex in HTML4).

(NOTE HTML 5 spec does allow this, however, and it commonly works regardless)

The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

Essentially anything you would expect to be able to hold focus; form elements, links, etc.

What I think you probably want to do here is use a bit of JS (I would recommend jQuery for something relatively painless) to bind to the focus event on the input element and set border on the parent div.

Stick this at the bottom of your body tag to grab jQuery from the Google CDN:

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

Then something like this would probably do the trick:

$(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');
        }
    });
});

这篇关于对div的Tab索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！