Làm cách nào để bạn tự động đặt tiêu điểm vào hộp văn bản khi tải trang web?


Câu trả lời:


245

Nếu bạn đang sử dụng jquery:

$(function() {
  $("#Box1").focus();
});

hoặc nguyên mẫu:

Event.observe(window, 'load', function() {
  $("Box1").focus();
});

hoặc javascript đơn giản:

window.onload = function() {
  document.getElementById("Box1").focus();
};

mặc dù hãy nhớ rằng điều này sẽ thay thế các trình xử lý tải khác, vì vậy hãy tìm addLoadEvent () trong google để biết cách an toàn để nối các trình xử lý tải hơn là thay thế.


3
Tại sao không đặt xử lý trên các yếu tố cơ thể? Bất kỳ tài liệu tham khảo? Cảm ơn
Alexander Torstling

7
Bởi vì việc tách javascript khỏi HTML sẽ dễ dàng hơn nhiều. Bạn nên thêm hành vi kịch bản vào các yếu tố trực quan trong HTML của mình.
Ben Scheirman

94

Trong HTML có một autofocusthuộc tính cho tất cả các trường mẫu. Có một hướng dẫn tốt về nó trong Lặn vào HTML 5 . Thật không may, hiện tại nó không được hỗ trợ bởi các phiên bản IE dưới 10.

Để sử dụng thuộc tính HTML 5 và quay lại tùy chọn JS:

<input id="my-input" autofocus="autofocus" />
<script>
  if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("my-input").focus();
  }
</script>

Không yêu cầu trình xử lý jQuery, onload hoặc event, bởi vì JS nằm dưới phần tử HTML.

Chỉnh sửa: một ưu điểm khác là nó hoạt động với JavaScript tắt trong một số trình duyệt và bạn có thể xóa JavaScript khi bạn không muốn hỗ trợ các trình duyệt cũ hơn.

Chỉnh sửa 2: Firefox 4 hiện hỗ trợ autofocusthuộc tính, chỉ cần rời khỏi IE mà không cần hỗ trợ.


3
Có chuyện gì với autofocus="aufofocus"? Tất cả các liên kết bạn cung cấp chỉ cần nói để thêm thuộc tính : autofocus.
Gerrat

6
Quay trở lại thời XHTML và HTML4, người ta thường làm attribute="value"các thuộc tính boolean. HTML5 xuất hiện cùng với "cú pháp thuộc tính trống" và chúng tôi đã loại bỏ sự dư thừa. Bây giờ chúng ta có thể làm<input checked disabled autofocus data-something>
dave1010

Tôi thích cách tiếp cận này ... Mã đó thuộc về đầu vào ... loại bỏ đầu vào và bùng nổ, mã liên quan ở ngay đó ... Chúng tôi bị lạc trong những ngày này ... Đi vòng tròn đầy đủ bây giờ cố gắng đơn giản hóa. ..
Serge

16

Bạn cần sử dụng javascript:

<BODY onLoad="document.getElementById('myButton').focus();">

@Ben lưu ý rằng bạn không nên thêm các trình xử lý sự kiện như thế này. Trong khi đó là một câu hỏi khác, ông khuyên bạn nên sử dụng chức năng này:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

Và sau đó thực hiện cuộc gọi tới addLoadEvent trên trang của bạn và tham chiếu một chức năng đặt trọng tâm cho hộp văn bản bạn muốn.


14

Đơn giản chỉ cần viết tự động lấy nét trong trường văn bản. Điều này là đơn giản và nó hoạt động như thế này:

 <input name="abc" autofocus></input>

Hi vọng điêu nay co ich.


1
Điều này tốt nhưng vấn đề là, nếu bạn có các bước với kiểu trượt, điều đó sẽ không hữu ích nếu kiểu đầu vào ở bước 3 hoặc bước 4 cho ex
Kobe Bryan

12

Bạn có thể làm điều đó một cách dễ dàng bằng cách sử dụng jquery theo cách này:

<script type="text/javascript">

    $(document).ready(function () {
        $("#myTextBoxId").focus();
    });

</script>

bằng cách gọi chức năng này trong $(document).ready().

Nó có nghĩa là chức năng này sẽ thực thi khi DOM đã sẵn sàng.

Để biết thêm thông tin về chức năng SYN SÀNG, hãy tham khảo: http://api.jquery.com/ yet /


11

Sử dụng vanilla html và javascript đơn giản

<input type='text' id='txtMyInputBox' />


<script language='javascript' type='text/javascript'>
function SetFocus()
{
    // safety check, make sure its a post 1999 browser
    if (!document.getElementById)
    {
        return;
    }

    var txtMyInputBoxElement = document.getElementById("txtMyInputBox");

    if (txtMyInputBoxElement != null)
    {
        txtMyInputBoxElement.focus();
    }
}
SetFocus();
</script>

Đối với những người sử dụng khung .net và asp.net 2.0 trở lên, tầm thường của nó. Nếu bạn đang sử dụng các phiên bản cũ hơn của khung, bạn cần viết một số javascript tương tự như trên.

Trong trình xử lý OnLoad của bạn (thường là page_load nếu bạn đang sử dụng mẫu trang chứng khoán được cung cấp với studio trực quan), bạn có thể sử dụng:

C #

protected void PageLoad(object sender, EventArgs e)
{
    Page.SetFocus(txtMyInputBox);
}

VB.NET

Protected Sub PageLoad(sender as Object, e as EventArgs)

    Page.SetFocus(txtMyInputBox)

End Sub

(* Lưu ý Tôi đã xóa ký tự gạch dưới khỏi tên hàm thường là Page_Load vì trong khối mã, nó đã từ chối hiển thị đúng! Tôi không thể thấy trong tài liệu đánh dấu làm thế nào để lấy dấu gạch dưới để hiển thị không bị xóa.)

Hi vọng điêu nay co ich.


7

IMHO, cách 'sạch nhất' để chọn trường văn bản đầu tiên, hiển thị, được bật trên trang, là sử dụng jQuery và làm một cái gì đó như thế này:

$(document).ready(function() {
  $('input:text[value=""]:visible:enabled:first').focus();
});

Mong rằng sẽ giúp ...

Cảm ơn...


6
<html>  
<head>  
<script language="javascript" type="text/javascript">  
function SetFocus(InputID)  
{  
   document.getElementById(InputID).focus();  
}  
</script>  
</head>  
<body onload="SetFocus('Box2')">  
<input id="Box1" size="30" /><br/>  
<input id="Box2" size="30" />  
</body>  
</html>  

5

Theo lời khuyên chung, tôi khuyên bạn không nên lấy cắp trọng tâm từ thanh địa chỉ. ( Jeff đã nói về điều đó. )

Trang web có thể mất một chút thời gian để tải, điều đó có nghĩa là sự thay đổi tiêu điểm của bạn có thể xảy ra trong một thời gian dài sau khi người dùng gõ URL pae. Sau đó, anh ta có thể đã thay đổi ý định và quay lại gõ url trong khi bạn sẽ tải trang của mình và lấy cắp trọng tâm để đặt nó vào hộp văn bản của bạn.

Đó là lý do duy nhất khiến tôi loại bỏ Google làm trang bắt đầu.

Tất nhiên, nếu bạn kiểm soát mạng (mạng cục bộ) hoặc nếu thay đổi tiêu điểm là để giải quyết vấn đề về khả năng sử dụng quan trọng, hãy quên tất cả những gì tôi vừa nói :)


Tôi đồng ý với bạn trong một số trường hợp. Tuy nhiên, trong trường hợp cụ thể của tôi, tôi bật lên một div nhỏ chỉ có một hộp nhập. Người dùng có nghĩa vụ nhập một cái gì đó và ngay lập tức đóng div để thiết lập tiêu điểm là tiện dụng.
Đánh dấu Biek

2

Tôi đã có một vấn đề hơi khác nhau. Tôi muốn autofocus, nhưng, muốn placeholdervăn bản vẫn còn, trình duyệt chéo. Một số trình duyệt sẽ ẩn placeholdervăn bản ngay khi trường tập trung, một số trình duyệt sẽ giữ nó. Tôi đã phải đặt các trình giữ chỗ ở trên trình duyệt chéo, có tác dụng phụ kỳ lạ hoặc ngừng sử dụng autofocus.

Vì vậy, tôi đã lắng nghe khóa đầu tiên được gõ vào thẻ body và chuyển hướng khóa đó vào trường nhập liệu đích. Sau đó, tất cả những người xử lý sự kiện liên quan đều bị giết để giữ mọi thứ sạch sẽ.

var urlInput = $('#Url');

function bodyFirstKey(ev) {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);

    if (ev.target == document.body) {
        urlInput.focus();
        if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
            urlInput.val(ev.key);
            return false;
        }
    }
};
function urlInputFirstFocus() {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);
};

$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);

https://jsfiddle.net/b9chris/qLrrb93w/


0

Có thể đặt autofocustrên các yếu tố đầu vào

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">

-1

Nếu bạn đang sử dụng ASP.NET thì bạn có thể sử dụng

yourControlName.Focus()

trong mã trên máy chủ, sẽ thêm JavaScript thích hợp vào trang.

Các khung công tác phía máy chủ khác có thể có một phương thức tương đương.


-3

Sử dụng mã dưới đây. Đối với tôi nó đang làm việc

jQuery("[id$='hfSpecialty_ids']").focus()
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.