Jawaban:
Jika Anda menggunakan jquery:
$(function() {
$("#Box1").focus();
});
atau prototipe:
Event.observe(window, 'load', function() {
$("Box1").focus();
});
atau javascript biasa:
window.onload = function() {
document.getElementById("Box1").focus();
};
meskipun perlu diingat bahwa ini akan menggantikan yang lain pada penangan beban, jadi lihat addLoadEvent () di google untuk cara yang aman untuk menambahkan penangan yang memuat alih-alih mengganti.
Di HTML ada autofocusatribut untuk semua bidang formulir. Ada tutorial yang bagus di Dive Into HTML 5 . Sayangnya saat ini tidak didukung oleh versi IE kurang dari 10.
Untuk menggunakan atribut HTML 5 dan kembali ke opsi JS:
<input id="my-input" autofocus="autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>Tidak diperlukan jQuery, onload atau event handler, karena JS di bawah elemen HTML.
Sunting: keuntungan lain adalah ia berfungsi dengan menonaktifkan JavaScript di beberapa browser dan Anda dapat menghapus JavaScript ketika Anda tidak ingin mendukung browser yang lebih lama.
Sunting 2: Firefox 4 sekarang mendukung autofocusatribut, hanya meninggalkan IE tanpa dukungan.
autofocus="aufofocus"? Semua link Anda tersedia hanya mengatakan untuk menambahkan atribut: autofocus.
attribute="value"untuk atribut boolean. HTML5 datang dengan "sintaks atribut kosong" dan kami membatalkan redundansi. Sekarang bisa kita lakukan<input checked disabled autofocus data-something>
Anda perlu menggunakan javascript:
<BODY onLoad="document.getElementById('myButton').focus();">@Ben mencatat bahwa Anda tidak harus menambahkan penangan acara seperti ini. Meskipun itu adalah pertanyaan lain, ia merekomendasikan Anda untuk menggunakan fungsi ini:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}Dan kemudian melakukan panggilan untuk addLoadEvent di halaman Anda dan referensi fungsi yang menetapkan fokus ke kotak teks yang Anda inginkan.
Cukup tulis autofocus di bidang teks. Ini sederhana dan berfungsi seperti ini:
<input name="abc" autofocus></input>Semoga ini membantu.
Anda dapat melakukannya dengan mudah dengan menggunakan jquery dengan cara ini:
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>dengan memanggil fungsi ini di $(document).ready().
Ini berarti fungsi ini akan dijalankan ketika DOM siap.
Untuk informasi lebih lanjut tentang fungsi READY, lihat: http://api.jquery.com/ready/
Menggunakan html dan javascript vanilla biasa
<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>Bagi mereka yang di luar sana menggunakan .net framework dan asp.net 2.0 atau lebih tinggi, ini sepele. Jika Anda menggunakan versi kerangka kerja yang lebih lama, Anda harus menulis beberapa javascript yang mirip dengan di atas.
Di handler OnLoad Anda (umumnya page_load jika Anda menggunakan template halaman stok yang disediakan dengan visual studio) Anda dapat menggunakan:
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(* Catatan saya menghapus karakter garis bawah dari nama fungsi yang umumnya Page_Load karena dalam blok kode itu menolak untuk membuat dengan benar! Saya tidak bisa melihat dalam dokumentasi markup bagaimana mendapatkan garis bawah untuk membuat tidak dihapus.)
Semoga ini membantu.
IMHO, cara 'terbersih' untuk memilih bidang teks Pertama, yang terlihat, diaktifkan pada halaman, adalah dengan menggunakan jQuery dan melakukan sesuatu seperti ini:
$(document).ready(function() {
$('input:text[value=""]:visible:enabled:first').focus();
});Semoga itu bisa membantu ...
Terima kasih...
<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> Sebagai saran umum, saya akan merekomendasikan untuk tidak mencuri fokus dari bilah alamat. ( Jeff sudah membicarakan hal itu. )
Halaman web dapat membutuhkan waktu untuk dimuat, yang berarti bahwa perubahan fokus Anda dapat terjadi lama setelah pengguna mengetik URL pae. Lalu dia bisa berubah pikiran dan kembali ke mengetik url saat Anda akan memuat halaman Anda dan mencuri fokus untuk memasukkannya ke dalam kotak teks Anda.
Itulah satu-satunya alasan yang membuat saya menghapus Google sebagai halaman awal saya.
Tentu saja, jika Anda mengontrol jaringan (jaringan lokal) atau jika perubahan fokus adalah untuk memecahkan masalah kegunaan yang penting, lupakan semua yang baru saja saya katakan :)
Saya punya masalah yang sedikit berbeda. Saya ingin autofocus, tetapi, ingin placeholderteks tetap, lintas browser. Beberapa browser akan menyembunyikan placeholderteks segera setelah bidang fokus, beberapa akan menyimpannya. Saya harus membuat placeholder tetap menggunakan cross-browser, yang memiliki efek samping aneh, atau berhenti menggunakan autofocus.
Jadi saya mendengarkan kunci pertama yang diketikkan pada tag tubuh, dan mengarahkan kunci itu ke bidang input target. Kemudian semua penangan acara yang terlibat terbunuh untuk menjaga kebersihan.
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);Dimungkinkan untuk mengatur autofocuselemen input
<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">Jika Anda menggunakan ASP.NET maka Anda dapat menggunakan
yourControlName.Focus()dalam kode di server, yang akan menambahkan JavaScript yang sesuai ke halaman.
Kerangka kerja sisi server lain mungkin memiliki metode yang setara.