请参阅下面的表单 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>
在这里,我将协议复选框的样式设置为完全隐藏无线电输入并将背景图像应用于包装器 div,并且包装器 div 的 onclick 将切换背景图像以及无线电输入的检查状态。
我需要在“terms_radio”DIV 上设置 tabindex 索引,只是 div 上的 tabindex="2" 属性不起作用,
当光标位于电子邮件输入字段时,按 TAB 是否可以将无线电输入标签上的虚线边框向上显示?
DIV 元素与 tabindex 不兼容in HTML4).
(NOTEHTML 5 规范does但是,允许这样做,并且无论如何它通常都会起作用)
以下元素支持 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"></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');
}
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)