如何使用 JavaScript 将焦点设置在隐藏的文本框字段上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10851402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the focus on a hidden textbox field using JavaScript?
提问by Pramod Kumar
How can I set the focus on a hidden textbox element?
如何将焦点设置在隐藏的文本框元素上？
I tried this:
我试过这个：
document.getElementById("textControl_fd_component_JSON_TASK_NStext64").focus();
But, this does not work here. As alert(document.activeElement.id);returns nullin this case.
但是，这在这里不起作用。在这种情况下作为alert(document.activeElement.id);回报null。
If I make this field visible, the above script works fine. Any ideas where I am getting it wrong?
如果我让这个字段可见，上面的脚本就可以正常工作。任何想法我哪里出错了？
回答by apsillers
If you really need to do this, make the box transparent, not hidden:
如果你真的需要这样做，让盒子透明，而不是隐藏：
opacity:0;
filter:alpha(opacity=0);
Alternatively, if you want to ensure that the user doesn't accidentally click it, just place the input inside a div with
或者，如果您想确保用户不会意外单击它，只需将输入放在 div 中
width: 0;
overflow: hidden;
However, there is most certainly a better way to do what you want, maybe using keydown/keypressevents.
但是，肯定有更好的方法来做您想做的事，也许使用keydown/keypress事件。
回答by AlexMA
I don't think this is allowed, at least in IE. I got this information from jQuery's focus page.
我认为这是不允许的，至少在 IE 中是不允许的。我从jQuery's focus page得到了这个信息。
回答by Guntram
You can add some js if you need a workaround and cannot change the opacity attr.
如果您需要解决方法并且无法更改不透明度属性，则可以添加一些 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);
});
回答by Matthew Booth
Using Apsillers answer, my setup for this same situation involved:
使用 Apsillers 回答，我针对相同情况的设置涉及：
- a parent div with position:relative;
- a child form element position:absolute; z-index:0; opacity:0; filter:alpha(opacity=0);
- a second child element position:absolute; z-index: (value > 0) (positioned to cover the transparent input).
- 具有位置的父 div：相对；
- 一个子表单元素位置：绝对；z-索引：0；不透明度：0; 过滤器：阿尔法（不透明度= 0）；
- 第二个子元素位置：绝对；z-index: (value > 0) （定位以覆盖透明输入）。
Aspillers' answer is the correct one given the question asked, but I wanted to give a practical example of when this is necessary.
鉴于所问的问题，阿斯皮勒斯的回答是正确的，但我想举一个实际例子，说明何时需要这样做。
Specifically, form elements can be hidden if you're using any kind of script/plugin that makes "fancy" inputs (i.e. radio/check elements, select elements). But if your script or plugin is written poorly, it can eliminate keyboard accessibility. Preserving the flow of a form by allowing all elements to have focus can save a lot of headaches for website users.
具体来说，如果您使用任何类型的脚本/插件进行“花哨”输入（即单选/检查元素、选择元素），则可以隐藏表单元素。但是如果你的脚本或插件写得不好，它可以消除键盘的可访问性。通过让所有元素都有焦点来保持表单的流动可以为网站用户省去很多麻烦。
