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

Question

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

我试过这个：

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

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

如果我使该字段可见，则上面的脚本可以正常工作。有什么想法我弄错了吗？

Answer 1

如果您确实需要这样做，请使框透明，而不是隐藏：

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

或者，如果您想确保用户不会意外单击它，只需将输入放在 div 中

width: 0;
overflow: hidden;

但是，肯定有更好的方法来做你想做的事，也许是使用keydown/keypress事件。

Answer 2

我认为这是不允许的，至少在 IE 中是这样。我从jQuery 的 focus page获得了这些信息。

Answer 3

如果您需要解决方法并且无法更改不透明度属性，您可以添加一些 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);
});

Answer 4

使用 Apsillers 的回答，我对同样情况的设置涉及：

1. 具有位置的父 div:relative;
2. 子表单元素位置：绝对；z-索引：0；不透明度：0；过滤器：阿尔法（不透明度= 0）；
3. 第二个子元素位置：绝对；z-index：（值> 0）（定位以覆盖透明输入）。

鉴于所提出的问题，Aspillers 的答案是正确的，但我想举一个实际的例子来说明什么时候这是必要的。

具体来说，如果您使用任何类型的脚本/插件来进行“花式”输入（即单选/检查元素，选择元素），则可以隐藏表单元素。但是如果你的脚本或插件写得不好，它可能会消除键盘的可访问性。通过允许所有元素具有焦点来保持表单的流动可以为网站用户省去很多麻烦。