Bagaimana Anda mengatur fokus secara otomatis ke kotak teks saat halaman web dimuat?

Jawaban:

245

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.

Ben Scheirman
sumber
3
Mengapa tidak meletakkan penangan pada elemen tubuh? Ada referensi? Terima kasih
Alexander Torstling
7
Karena jauh lebih bersih untuk memisahkan javascript dari HTML. Anda harus menambahkan perilaku skrip ke elemen visual dalam HTML Anda.
Ben Scheirman
94

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.

dave1010
sumber
3
Ada apa dengan ini autofocus="aufofocus"? Semua link Anda tersedia hanya mengatakan untuk menambahkan atribut: autofocus.
Gerrat
6
Kembali pada zaman XHTML dan HTML4 itu biasa dilakukan 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>
dave1010
Saya suka pendekatan ini ... Kode itu milik input ... singkirkan input dan boom, kode yang terkait ada di sana ... Kami sangat tersesat hari ini ... Lingkaran penuh sekarang mencoba menyederhanakan. ..
Serge
16

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.

Espo
sumber
14

Cukup tulis autofocus di bidang teks. Ini sederhana dan berfungsi seperti ini:

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

Semoga ini membantu.

Arjun
sumber
1
ini bagus tetapi masalahnya adalah, jika Anda memiliki langkah-langkah dengan gaya geser, itu tidak akan berguna terutama jika tipe input pada langkah 3 atau langkah 4 untuk mantan
Kobe Bryan
12

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/

Amir Chatrbahr
sumber
11

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.

Jon
sumber
7

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...

menghidupkan kembali
sumber
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>
Joel Coehoorn
sumber
5

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 :)

Vincent Robert
sumber
Saya setuju dengan Anda dalam beberapa kasus. Namun, dalam kasus khusus saya, saya muncul sedikit div yang hanya satu kotak input. Pengguna seharusnya memasukkan sesuatu dan segera menutup div sehingga pengaturan fokus berguna.
Mark Biek
2

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);

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

Chris Moschini
sumber
0

Dimungkinkan untuk mengatur autofocuselemen input

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
castellon oscar
sumber
-1

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.

Andrew Morton
sumber
-3

Gunakan kode di bawah ini. Bagi saya itu berfungsi

jQuery("[id$='hfSpecialty_ids']").focus()
srikanth
sumber