Hộp nhập tiêu điểm khi tải

95

Làm cách nào để con trỏ có thể tập trung vào một hộp nhập cụ thể khi tải trang?

Có thể giữ lại giá trị văn bản ban đầu và đặt con trỏ ở cuối đầu vào không?

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />

— Codex73
nguồn

170

Có hai phần cho câu hỏi của bạn.

1) Làm thế nào để tập trung đầu vào khi tải trang?

Bạn chỉ có thể thêm autofocusthuộc tính vào đầu vào.

<input id="myinputbox" type="text" autofocus>

Tuy nhiên, điều này có thể không được hỗ trợ trong tất cả các trình duyệt, vì vậy chúng tôi có thể sử dụng javascript.

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

2) Làm thế nào để đặt con trỏ ở cuối văn bản đầu vào?

Đây là một giải pháp không phải jQuery với một số mã mượn từ một câu trả lời SO khác .

function placeCursorAtEnd() {
  if (this.setSelectionRange) {
    // Double the length because Opera is inconsistent about 
    // whether a carriage return is one character or two.
    var len = this.value.length * 2;
    this.setSelectionRange(len, len);
  } else {
    // This might work for browsers without setSelectionRange support.
    this.value = this.value;
  }

  if (this.nodeName === "TEXTAREA") {
    // This will scroll a textarea to the bottom if needed
    this.scrollTop = 999999;
  }
};

window.onload = function() {
  var input = document.getElementById("myinputbox");

  if (obj.addEventListener) {
    obj.addEventListener("focus", placeCursorAtEnd, false);
  } else if (obj.attachEvent) {
    obj.attachEvent('onfocus', placeCursorAtEnd);
  }

  input.focus();
}

Đây là một ví dụ về cách tôi thực hiện điều này với jQuery.

<input type="text" autofocus>

<script>
$(function() {
  $("[autofocus]").on("focus", function() {
    if (this.setSelectionRange) {
      var len = this.value.length * 2;
      this.setSelectionRange(len, len);
    } else {
      this.value = this.value;
    }
    this.scrollTop = 999999;
  }).focus();
});
</script>

— jessegavin
nguồn

3

Khối mã đầu tiên được đề xuất cũng thực sự đặt con trỏ ở cuối giá trị hiện có, nó hoạt động tốt. Tôi đánh giá cao sự giúp đỡ của bạn.

— Codex73

46

Chỉ cần lưu ý - bây giờ bạn có thể làm điều này với HTML5 mà không cần JavaScript cho các trình duyệt hỗ trợ nó:

<input type="text" autofocus>

Bạn có thể muốn bắt đầu với điều này và xây dựng dựa trên nó bằng JavaScript để cung cấp dự phòng cho các trình duyệt cũ hơn.

— David Calhoun
nguồn

Rất vui được biết rằng, điều này đã di chuyển con trỏ đến vị trí cuối cùng trong trường nhập liệu chưa?

— Camilo Díaz Repka

1

Tôi không nghĩ rằng @ Codex73 đang cố gắng thực hiện những gì thuộc tính giữ chỗ trong HTML5 thực hiện. Có vẻ như anh ta muốn con trỏ tự động được định vị ở cuối bất kỳ giá trị nào hiện có trong đầu vào.

— jessegavin

2

Bạn nói đúng, đây không phải là một giải pháp hoàn chỉnh. Nhưng điều này giải quyết được một số điều (tự động lấy nét khi tải và văn bản giữ chỗ).

— David Calhoun

Lưu ý rằng kể 1/2019, Safari trên iOS không hỗ trợ này: caniuse.com/#feat=autofocus

— sporker

11

$(document).ready(function() {
    $('#id').focus();
});

— Nasruddin
nguồn

1

Điều này yêu cầu jQuery.

— Tom Pohl

1

Vâng bạn cần bao gồm libs jQuery :)

— Nasruddin

cổ điển stackoverflow :)

— Florian Fida

3

function focusOnMyInputBox(){                                 
    document.getElementById("myinputbox").focus();
}

<body onLoad="focusOnMyInputBox();">

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text">

— crnlx
nguồn

2

Một cách di động để làm điều này là sử dụng một chức năng tùy chỉnh (để xử lý các khác biệt của trình duyệt) như chức năng này .

Sau đó, thiết lập một trình xử lý cho onloadcuối <body>thẻ của bạn , như jessegavin đã viết:

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

— Camilo Díaz Repka
nguồn

1

Làm việc tốt...

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

— Mohammed Javed
nguồn

1

giải pháp một dòng rất đơn giản:

<body onLoad="document.getElementById('myinputbox').focus();">

— kavi
nguồn

0

Đây là những gì làm việc tốt cho tôi:

<form name="f" action="/search">
    <input name="q" onfocus="fff=1" />
</form>

fff sẽ là một biến toàn cục mà tên hoàn toàn không liên quan và mục đích sẽ là để dừng sự kiện tải chung để buộc tập trung vào đầu vào đó.

<body onload="if(!this.fff)document.f.q.focus();">
    <!-- ... the rest of the page ... -->
</body>

Từ: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html

— Nghe rõ
nguồn

0

Nếu bạn không thể thêm vào thẻ BODY vì lý do nào đó, bạn có thể thêm thẻ này SAU KHI Biểu mẫu:

<SCRIPT type="text/javascript">
    document.yourFormName.yourFieldName.focus();
</SCRIPT>

— Zardiw
nguồn

0

Thử:

Javascript thuần túy:

[elem][n].style.visibility='visible';
[elem][n].focus();

Truy vấn:

[elem].filter(':visible').focus();

— KingRider
nguồn

0

Thêm cái này vào đầu js của bạn

var input = $('#myinputbox');

input.focus();

Hoặc sang html

<script>
    var input = $('#myinputbox');

    input.focus();
</script>

— Marty
nguồn