Làm cách nào để con trỏ có thể tập trung vào một hộp nhập liệu cụ thể khi tải trang?Hộp nhập liệu lấy nét khi tải
Có thể giữ nguyên 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" />
Có hai phần cho câu hỏi của bạn.
1) Cách tập trung đầu vào khi tải trang?
Bạn chỉ có thể thêm thuộc tính autofocus 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) Cách đặt con trỏ ở cuối văn bản nhập liệu?
Đây là giải pháp không phải jQuery với một số mã được mượn từ another SO answer.
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à ví dụ về cách tôi thực hiện việc 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>
đoạn Code:
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" />
Một cách cầm tay để làm điều này là sử dụng một chức năng tùy chỉnh (để xử lý những khác biệt trình duyệt) như this one.
Sau đó thiết lập một handler cho onload ở phần cuối của thẻ <body> của bạn, như jessegavin đã viết:
window.onload = function() {
document.getElementById("myinputbox").focus();
}
Chỉ cần một người đứng đầu lên - bây giờ bạn có thể làm điều này với HTML5 mà không cần JavaScript cho 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 nó với JavaScript để cung cấp dự phòng cho các trình duyệt cũ hơn.
Rất vui khi biết điều đó, đ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? –
Tôi không nghĩ rằng @ Codex73 đang cố gắng hoàn thành thuộc tính giữ chỗ trong HTML5. Có vẻ như anh ta muốn con trỏ được đặt tự động ở cuối bất kỳ giá trị nào hiện đang ở đầu vào. – jessegavin
Bạn nói đúng, đây không phải là giải pháp hoàn chỉnh. Nhưng điều này không giải quyết được một vài điều (tự động lấy nét và văn bản giữ chỗ). –
$(document).ready(function() {
$('#id').focus();
});
Điều này yêu cầu jQuery. –
Vâng, bạn cần phải bao gồm jQuery libs :) – Nasruddin
Đây là những gì hoạt động tốt đối với tôi:
<form name="f" action="/search">
<input name="q" onfocus="fff=1" />
</form>
fff sẽ là một biến toàn cầu trong đó tên là hoàn toàn không thích hợp và với mục đích sẽ dừng sự kiện onload chung để buộc tập trung ở đầ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
Nếu bạn không thể thêm vào thẻ BODY vì một lý do, bạn có thể thêm này SAU Mẫu:
<SCRIPT type="text/javascript">
document.yourFormName.yourFieldName.focus();
</SCRIPT>
Làm việc tốt ...
window.onload = function() {
var input = document.getElementById("myinputbox").focus();
}
Hãy thử:
Javascript tinh khiết:
[elem][n].style.visibility='visible';
[elem][n].focus();
Jquery:
[elem].filter(':visible').focus();
Khối mã đầu tiên đề nghị thực sự pla lấy con trỏ ở cuối giá trị hiện tại, nó hoạt động tốt. Tôi apreciate giúp đỡ của bạn. – Codex73