Đặt tiêu điểm vào hộp nhập HTML khi tải trang

95

Tôi đang cố gắng đặt tiêu điểm mặc định trên hộp nhập khi trang tải (ví dụ: google). Trang của tôi rất đơn giản, nhưng tôi không thể tìm ra cách thực hiện việc này.

Đây là những gì tôi có cho đến nay:

<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>

Tại sao điều đó không hoạt động trong khi điều này hoạt động tốt?

<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>

Trợ giúp được đánh giá cao :-)

— Chris
nguồn

36

Đường thẳng này:

<input type="password" name="PasswordInput"/>

nên có một thuộc tính id , như sau:

<input type="password" name="PasswordInput" id="PasswordInput"/>

— Saikios
nguồn

Điều đó có thực sự thiết lập tiêu điểm đầu vào không? Bạn đã thử nó trên trình duyệt nào?

— Peter Mortensen

@PeterMortensen khi tôi thử nghiệm này 9 năm về trước là trên firefox, chrome và ie :)

— Saikios

326

Và bạn có thể sử dụng thuộc tính lấy nét tự động của HTML5 (hoạt động trong tất cả các trình duyệt hiện tại ngoại trừ IE9 trở xuống). Chỉ gọi tập lệnh của bạn nếu đó là IE9 trở xuống hoặc phiên bản cũ hơn của các trình duyệt khác.

<input type="text" name="fname" autofocus>

— LinuxLars
nguồn

7

ie9: stackoverflow.com/questions/8280988/…

— jedierikb

@BhaveshGangani autofocuskhông được hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn.

— Michel Ayres

4

Dưới đây là một bảng tương thích cho tự động lấy nét : caniuse.com/#feat=autofocus

— Oreo

5

Đây là một trong những vấn đề phổ biến với IE và cách khắc phục điều này rất đơn giản. Thêm .focus () hai lần vào đầu vào.

Sửa chữa :-

function FocusOnInput() {
    var element = document.getElementById('txtContactMobileNo');
    element.focus();
    setTimeout(function () { element.focus(); }, 1);
}

Và gọi FocusOnInput () trên $ (document) .ready (function () {.....};

— Kumar Kirti
nguồn

1

Bạn cũng có thể sử dụng:

<body onload="focusOnInput()">
    <form name="passwordForm" action="verify.php" method="post">
        <input name="passwordInput" type="password" />
    </form>
</body>

Và sau đó trong JavaScript của bạn:

function focusOnInput() {
    document.forms["passwordForm"]["passwordInput"].focus();
}

— D Blues
nguồn