Javascript 在页面加载时将焦点设置在 HTML 输入框上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3383429/
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
Setting focus on an HTML input box on page load
提问by Chris
I'm trying to set the default focus on an input box when the page loads (example: google). My page is very simple, yet I can't figure out how to do this.
我试图在页面加载时将默认焦点设置在输入框上（例如：google）。我的页面很简单，但我不知道如何做到这一点。
This is what I've got so far:
这是我到目前为止所得到的：
<html>
<head>
<title>Password Protected Page</title>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("PasswordInput").focus();
}
</script>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body onload="FocusOnInput()">
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered">
<form action="verify.php" method="post">
<input type="password" name="PasswordInput"/>
</form>
</div>
</td></tr>
</table>
</body>
</html>
How come that doesn't work while this works fine?
为什么这不起作用，而这工作正常？
<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("InputID").focus();
}
</script>
</head>
<body onload="FocusOnInput()">
<form>
<input type="text" id="InputID">
</form>
</body>
</html>
Help is much appreciated :-)
非常感谢帮助:-)
采纳答案by Saikios
This line:
这一行：
<input type="password" name="PasswordInput"/>
should have an idattribute, like so:
应该有一个id属性，像这样：
<input type="password" name="PasswordInput" id="PasswordInput"/>
回答by LinuxLars
And you can use HTML5's autofocus attribute (works in all current browsers except IE9 and below). Only call your script if it's IE9 or earlier, or an older version of other browsers.
并且您可以使用 HTML5 的 autofocus 属性（适用于除 IE9 及更低版本之外的所有当前浏览器）。仅在 IE9 或更早版本或其他浏览器的旧版本时调用您的脚本。
<input type="text" name="fname" autofocus>
回答by Kumar Kirti
This is one of the common issues with IE and fix for this is simple. Add .focus() twice to the input.
这是 IE 的常见问题之一，解决这个问题很简单。将 .focus() 两次添加到输入中。
Fix :-
使固定 ：-
function FocusOnInput() {
var element = document.getElementById('txtContactMobileNo');
element.focus();
setTimeout(function () { element.focus(); }, 1);
}
And call FocusOnInput() on $(document).ready(function () {.....};
并在 $(document).ready(function () {.....}; 上调用 FocusOnInput();
回答by D Blues
You could also use:
您还可以使用：
<body onload="focusOnInput()">
<form name="passwordForm" action="verify.php" method="post">
<input name="passwordInput" type="password" />
</form>
</body>
And then in your JavaScript:
然后在你的 JavaScript 中：
function focusOnInput() {
document.forms["passwordForm"]["passwordInput"].focus();
}
