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

Tôi đang cố đặt trọng tâm mặc định vào hộp nhập khi tải trang (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 để làm điều này.Đặt tiêu điểm vào hộp nhập HTML khi tải trang

Đâ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 làm việc 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 nhiều đánh giá cao :-)

Nguồn

2010-08-01 Chris

dòng này:

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

nên có một thuộc tính id, như vậy:

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

Nguồn

2010-08-01 19:32:26 Saikios

271

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 và bel ow). Chỉ gọi kịch bản của bạn nếu đó là IE9 hoặc phiên bản cũ hơn 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>

Nguồn

2010-08-01 19:42:33 LinuxLars

+24

“hoạt động trong tất cả các trình duyệt hiện nay” - đó thực sự phụ thuộc vào định nghĩa của bạn về “tất cả các trình duyệt hiện tại” –

ie9: http://stackoverflow.com/questions/8280988/how-to-make-input-autofocus-in-internet-explorer – jedierikb

@BhaveshGangani ['autofocus' là không được hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn.] (http://www.w3schools.com/tags/att_input_autofocus.asp) –

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:

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

Nguồn

2015-09-16 17:11:55

Đây là một trong những vấn đề thường gặp với IE và sửa chữa cho điều này là đơn giản. Thêm .focus() hai lần vào đầu vào.

Fix: -

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

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

Nguồn

2016-03-31 10:44:40

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

Trả lời

Các vấn đề liên quan