如何使用JavaScript将焦点设置在隐藏的文本框字段上？

Question

我如何将焦点设置在隐藏的文本框元素上？

我尝试了这个方法：

document.getElementById("textControl_fd_component_JSON_TASK_NStext64").focus(); 

但是，在这里它不起作用。因为在这种情况下，alert(document.activeElement.id); 返回 null。

如果我将此字段设置为可见，则上述脚本可以正常工作。你有什么想法，我出了什么问题吗？

- Pramod Kumar

---

我认为你刚刚证明了无法对隐藏字段设置焦点，这是有道理的。你能否详细说明一下为什么想要这样做？也许有更好的方法。 - Drake Hampton

Answer 1

如果你真的需要这么做，那就将盒子设为透明而不是隐藏：

opacity:0;
filter:alpha(opacity=0);

或者，如果你想确保用户不会意外点击它，只需将输入框放在一个带有

pointer-events: none;

的 div 中即可。

width: 0;
overflow: hidden;

然而，肯定有更好的方法可以实现你想要的效果，也许可以使用 keydown/keypress 事件。

- apsillers

---

非常感谢，你刚刚帮我省去了几个小时的苦战 :) - Bren

这很好，理想情况下，你可以在未显示的（display: none;）DOM节点上添加一个focusable属性，使其能够获得焦点（无论是否有JavaScript来处理并向用户显示某些内容）。 - AJP

这种行为有官方参考资料吗？这也适用于“visibility：hidden”吗？还是只适用于“display：none”？ - jbyrd

谢谢这个。不幸的是，这确实是接收输入的最佳方式。keydown/keypress 事件无法满足 IME 输入需求。 - dan_waterworth

Answer 2

如果您需要解决方法且无法更改不透明度属性，可以添加一些js。

/* bind a click handler to your trigger */
jQuery('#your-search-trigger').on('click', function searchIconEventhandler (event) {
    /* in case your field is fading, cheat a little (check css transition duration) */
    setTimeout ( function timeoutFunction () {
        /* show the cursor */
        jQuery('#your-search-input').focus();
    }, 100);
});

- Guntram

Answer 3

我认为这在IE中是不允许的。我从jQuery的焦点页面获取了这些信息。

- AlexMA

Answer 4

使用Apsillers的答案时，我遇到了同样的情况：

1. 父级div使用position:relative;
2. 子级表单元素使用position:absolute; z-index:0; opacity:0; filter:alpha(opacity=0);
3. 第二个子元素使用position:absolute; z-index: (value > 0) （定位以覆盖透明输入）。

Apsillers的答案是针对提出的问题的正确答案，但我想给出一个实际的例子来说明这是何时必要的。

具体而言，如果您正在使用任何类型的脚本/插件来制作“花哨”的输入（即单选/复选框元素，选择元素），则可以隐藏表单元素。但是，如果您的脚本或插件编写得不好，则可能会消除键盘可访问性。通过允许所有元素具有焦点来保留表单的流程，可以为网站用户节省很多麻烦。

- Matthew Booth