javascript focus() 不适用于 Firefox 和 IE？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6936770/
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
javascript focus() not working on Firefox and IE?
提问by lisovaccaro
I'm trying to appear a form and focus it, for some reason it only works on Chrome. How can I make it work across browsers?
我正在尝试显示一个表单并将其聚焦，出于某种原因，它仅适用于 Chrome。我怎样才能让它跨浏览器工作？
<script>
function SearchCity(evt){
document.getElementById('ciudad-eq').style.display='none';
document.getElementById('buscarciudad').style.display='inline';
document.getElementById("city").focus();
}
</script>
<div onclick="SearchCity(event)" id="ciudad-eq" style="cursor: pointer;">
Not from Miami?
</div>
<div id="buscarciudad" style="display: none;">
<form role="search" method="post" id="searchform" action="insert/insert-ip.php">
<input type="text" id="city" name="ciudad" value="?Cual es tu ciudad?" style="width: 140px;" >
<input type="submit" value="ir" style="padding: 2px 6px;">
</form>
</div>
You can see it not working in here:
你可以看到它在这里不起作用：
What can I do to make it work? Thanks
我该怎么做才能让它发挥作用？谢谢
回答by OverZealous
Works for me under Firefox. However, this may be due to needing a delay after showing the item. Try changing your code to this:
在 Firefox 下对我有用。但是，这可能是由于显示项目后需要延迟。尝试将您的代码更改为：
function SearchCity(evt){
document.getElementById('ciudad-eq').style.display='none';
document.getElementById('buscarciudad').style.display='inline';
setTimeout(function() { document.getElementById("city").focus(); }, 1);
}
This adds a 1ms delay to allow the item to be made visible, so it should work under IE.
这会增加 1 毫秒的延迟以允许项目可见，因此它应该在 IE 下工作。
Explanation of why:
解释原因：
Under IE, an element that is not visible cannot receive focus. Depending on the version of IE, it doesn't always re-render (or re-flow) the document until afterthe current JavaScript function has returned. This leads to all kinds of weird behavior, but mostly, you don't see visual updates during JavaScript code blocks. Combined with the inability to assign focus, your last line of JS was either throwing an error, or being silently ignored.
在 IE 下，不可见的元素无法获得焦点。根据IE的版本，它并不总是重新渲染（或再流）的文件，直到后当前的JavaScript函数返回。这会导致各种奇怪的行为，但大多数情况下，您在 JavaScript 代码块期间看不到视觉更新。再加上无法分配焦点，你的最后一行 JS 要么抛出错误，要么被默默忽略。
Adding the setTimeouteffectively gives control back to the browser, so it can reflow the document. Then, it immediately runs the timer function, and sets the focus. The 1ms timeout is enough, because the browser will take over even if there's a timer waiting.
添加setTimeout有效地将控制权交还给浏览器，因此它可以重排文档。然后，它立即运行计时器功能，并设置焦点。1ms 超时就足够了，因为即使有计时器等待，浏览器也会接管。
回答by AlienWebguy
You just need to swap the order of things:
你只需要交换事物的顺序：
<div onclick="SearchCity(event)" id="ciudad-eq" style="cursor: pointer;">
Not from Miami?
</div>
<div id="buscarciudad" style="display: none;">
<form role="search" method="post" id="searchform" action="insert/insert-ip.php">
<input type="text" id="city" name="ciudad" value="?Cual es tu ciudad?" style="width: 140px;" >
<input type="submit" value="ir" style="padding: 2px 6px;">
</form>
</div>
<script>
function SearchCity(evt){
document.getElementById('ciudad-eq').style.display='none';
document.getElementById('buscarciudad').style.display='inline';
document.getElementById("city").focus();
}
</script>
The divs have to be in the DOM before JavaScript can look for them. This is the primary benefit of JQuery's $(document).ready(function(){ ...});
div 必须在 DOM 中，然后 JavaScript 才能找到它们。这是 JQuery 的主要好处$(document).ready(function(){ ...});
回答by Dheer
You may use return false and its working me for firefox.
您可以使用 return false 及其为 Firefox 工作。
<script>
function SearchCity(evt){
document.getElementById('ciudad-eq').style.display='none';
document.getElementById('buscarciudad').style.display='inline';
document.getElementById("city").focus();
return false;
}
</script>
回答by Own
You need to hack browser by a trick such as setTimeout code is as follows
您需要通过诸如 setTimeout 之类的技巧来破解浏览器，代码如下
setTimeout(function(){
$("#contril_id").focus();
},500);
