在页面加载时将焦点设置在 HTML 输入框上
我试图在页面加载时将默认焦点设置在输入框上（例如：google）。 我的页面非常简单，但我不知道如何做到这一点。
这就是我到目前为止所得到的：
<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>
为什么这不起作用，而这工作正常？
<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>
非常感谢帮助:-)
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.
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 :-)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
并且您可以使用 HTML5 的 autofocus 属性（适用于除 IE9 及更低版本之外的所有当前浏览器）。仅当使用 IE9 或更早版本或其他旧版本的浏览器时才调用脚本。
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.
这一行：
应该有一个 id 属性，如下所示：
This line:
should have an id attribute, like so:
这是 IE 的常见问题之一，修复起来很简单。
在输入中添加 .focus() 两次。
修复：-
并在 $(document).ready(function () {.....}; 上调用 FocusOnInput()
This is one of the common issues with IE and fix for this is simple.
Add .focus() twice to the input.
Fix :-
And call FocusOnInput() on $(document).ready(function () {.....};
您还可以使用：
然后在 JavaScript 中：
You could also use:
And then in your JavaScript: