在页面加载时将焦点设置为HTMLinput框
我试图设置默认焦点在页面加载时的input框(例如:谷歌)。 我的网页很简单,但我不知道如何做到这一点。
这是我到目前为止:
<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>
帮助非常感谢:-)
这一行:
<input type="password" name="PasswordInput"/>
应该有一个id属性,如下所示:
<input type="password" name="PasswordInput" id="PasswordInput"/>
而且您可以使用HTML5的自动对焦属性(适用于除IE9以下的所有当前浏览器)。 如果是IE9或更早版本,或者其他浏览器的旧版本,请调用您的脚本。
<input type="text" name="fname" autofocus>
这是IE浏览器常见的问题之一,修复这很简单。 将.focus()两次添加到input。
修复: –
function FocusOnInput() { var element = document.getElementById('txtContactMobileNo'); element.focus(); setTimeout(function () { element.focus(); }, 1); }
并调用FocusOnInput()在$(document).ready(function(){…..};
你也可以使用:
<body onload="focusOnInput()"> <form name="passwordForm" action="verify.php" method="post"> <input name="passwordInput" type="password" /> </form> </body>
然后在你的JavaScript中:
function focusOnInput() { document.forms["passwordForm"]["passwordInput"].focus(); }