请查看下面的表单 HTML 代码
<div class="协议"><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">我已经阅读并理解了</label>
<div class="form_submit"><input type="button" tabindex="3" value="Cancel" name="cancel"><input type="submit" tabindex="4" value="Submit" name="submit">
</表单>
在这里，我将协议复选框的样式设置为完全隐藏无线电输入并将背景图像应用于包装器 div，并且单击包装器 div 将切换背景图像以及无线电的选中状态输入.
我需要在 'terms_radio' DIV 上设置 tabindex 索引，只是 div 上的 tabindex="2" 属性不起作用，
当光标位于电子邮件输入字段时，是否可以在按 TAB 时将收音机输入标签上的虚线边框向上?
DIV 元素与 tabindex 不兼容 在 HTML4 中).
(注意 HTML 5 规范确实允许这样做，但是，无论如何它通常都有效)
<块引用>以下元素支持 tabindex 属性:A、AREA、BUTTON、INPUT、OBJECT、SELECT 和 TEXTAREA.
基本上任何您希望能够保持焦点的东西；表单元素、链接等
我认为你可能想要在这里做的是使用一点 JS(我会推荐 jQuery相对轻松)绑定到输入元素上的焦点事件并在父 div 上设置边框.
将其粘贴在 body 标签的底部以从 Google CDN 中获取 jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></脚本>那么像这样的事情可能会奏效:
$(function() {$('div.radio input').bind({焦点:函数(){$(this).closest('div.radio').css('border','1px dotted #000');},模糊:函数(){$(this).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 上的标签索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
