自定义tabbable DIV元素虚线边框不一致地应用

时间:2012-12-31 16:09:45

标签: jquery focus tabindex outline

所以,我开发了一些jQuery功能,找到了< SELECT>元素,隐藏它,并用< DIV>替换它。充满了形象。 < DIV>允许用户选中它,然后,它监听左/右箭头按键事件,突出显示适当的图像(即将所需的img设置为完全不透明度,灰化其他图像)。您可以将此与传统HTML进行比较,您可以在其中使用Tab键切换到SELECT,然后使用向上/向下键更改所选项目。

我使用通过jQuery添加的基本HTML来添加新的可列表DIV元素:

  

jQuery('#desiredOuterDomObjectID')。prepend(“< div tabindex ='0'id ='mnu1'>”);

这适用于我表单上3个SELECT元素中的2个。

所以,这是第三个SELECT元素的问题:我将我的无数jQuery函数更进了一步,并将它们包装成一个合适的插件。我的代码的插件版本也创建了一个完美的工作,tabbable< DIV>具有可以键入的IMG对象的内部数组。唯一的区别是:虚线高亮边框不显示在此特定< DIV>上。元件

当然,我的目标是在整个HTML表单中使用我的“改进的”插件代码,并处理我之前的开发工作..除了我似乎无法使我的插件在正常情况下创建一个可见的边框可能的DIV。

1 个答案:

答案 0 :(得分:0)

我终于找到了我的DIV元素之间的区别。

除了我添加到其中的tabindex属性外,前两个元素(在将它们标记为焦点时正确显示虚线轮廓)似乎也有某种类型的 height 属性分配给他们。

rouge DIV元素(也包含tabindex属性)DID没有指定任何高度(我认为它可能自动获得高度,因为它包含IMG元素,类似于其他DIV元素)。

一旦我使用javascript为它的style.height属性分配像素值,指示标签焦点的虚线边框就开始正确显示。