Question

我正在使用jQuery插件 searchabledropdown ，它实际上将<select>选择元素转换为input字段，其中结果在您键入时显示（它仍然看起来和行为比如选择下拉菜单！）。

现在我想把焦点转移到这样一个变形元素上。我做了什么：

我在Chrome网络工具中查找了所述元素，
然后写了一个匹配的jQuery选择器，
最终在其上调用了focus()。

我的代码似乎适用于其他元素（尝试使用未转换的，常规<select>元素，它可以正常工作。）

jQuery(".map-searchbox input").focus();

将焦点放在由searchabledropdown创建的input元素上但不起作用...以下是转换后的html元素的大纲。（对不起所有风格垃圾，但我不确定它是否重要......）

<div class="map-hudbox map-searchbox"> <select class="searchselect" style="text-decoration: none; width: 163px; height: 19px;"> <option value="...">...</option> ... </select> <input type="text" style="height: 17px; position: absolute; top: 0px; left: 0px; margin: 0px; padding: 2px 0px 0px 3px; outline-style: none; border-style: solid solid none; border-color: transparent; background-color: transparent; border-left-width: 1px; border-top-width: 1px; font-size: 12px; font-variant: normal; font-weight: normal; color: rgb(68, 68, 68); text-align: -webkit-auto; text-indent: 0px; text-shadow: none; text-transform: none; width: 140px; z-index: 2;"> <div style="position: absolute; top: 0px; left: 0px; width: 165px; height: 19px; background-color: rgb(255, 255, 255); opacity: 0.01; z-index: 1;"></div> </div>

input和底部div元素是通过 searchabledropdown 插件从顶部的select创建的元素。 input字段是我希望重点关注的字段。

为什么普通.focus()电话无效？

非常感谢帮助！：）

P.S。要避免检查jQuery选择器的常用建议：选择器有效，如果通过Chrome JS控制台打印出来，则显示我上面列出的input元素。

Answer 1

我认为outline-style: none;标记上的css属性input使得它看起来好像输入实际上没有聚焦。

Answer 2

给另一个人带一段时间。

我意识到问题是可见性问题。 searchabledropdown插件改变了输入和选择元素的可见性，并且关注隐形元素显然不起作用。

当上面提到的jQuery(".map-searchbox input").focus();像魅力一样工作时，找出可以看到的内容。

jQuery：专注于搜索下载

2 个答案: