Jak automatycznie ustawić fokus na pole tekstowe podczas ładowania strony internetowej?

Odpowiedzi:

245

Jeśli używasz jquery:

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

lub prototyp:

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

lub zwykły javascript:

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

pamiętaj jednak, że spowoduje to zastąpienie innych modułów obsługi ładunku, więc poszukaj metody addLoadEvent () w Google, aby w bezpieczny sposób zamiast zastępować dołączać moduły obsługi ładowania.

Ben Scheirman
źródło
3
Dlaczego nie umieścić uchwytów na elemencie ciała? Wszelkie odniesienia? Dzięki
Alexander Torstling
7
Ponieważ oddzielenie javascript od HTML jest znacznie czystsze. Powinieneś dodawać zachowanie skryptowe do elementów wizualnych w kodzie HTML.
Ben Scheirman
94

W HTML istnieje autofocusatrybut dla wszystkich pól formularza. W Dive Into HTML 5 znajduje się dobry samouczek . Niestety obecnie nie jest obsługiwany przez wersje IE mniejsze niż 10.

Aby użyć atrybutu HTML 5 i wrócić do opcji JS:

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

Nie są wymagane żadne moduły obsługi jQuery, onload ani zdarzeń, ponieważ JS znajduje się poniżej elementu HTML.

Edycja: kolejną zaletą jest to, że w niektórych przeglądarkach działa on z wyłączoną obsługą JavaScript i możesz usunąć JavaScript, jeśli nie chcesz obsługiwać starszych przeglądarek.

Edycja 2: Firefox 4 obsługuje teraz autofocusatrybut, pozostawiając IE bez obsługi.

dave1010
źródło
3
O co chodzi autofocus="aufofocus"? Wszystkie linki podałeś po prostu powiedzieć, aby dodać atrybut: autofocus.
Gerrat,
6
W czasach XHTML i HTML4 było to powszechne w attribute="value"przypadku atrybutów boolowskich. HTML5 pojawił się wraz z „pustą składnią atrybutu” i porzuciliśmy nadmiarowość. Teraz możemy zrobić<input checked disabled autofocus data-something>
dave1010,
Podoba mi się to podejście ... Ten kod należy do danych wejściowych ... pozbyć się danych wejściowych i bum, powiązany kod jest właśnie tam ... Tak się gubimy w dzisiejszych czasach ... Zataczamy koło teraz próbując uprościć. ..
Serge,
16

Musisz użyć javascript:

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

@Ben zauważa, że ​​nie należy dodawać takich programów obsługi zdarzeń. Chociaż to kolejne pytanie, zaleca skorzystanie z tej funkcji:

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

Następnie umieść wywołanie addLoadEvent na swojej stronie i odwołaj się do funkcji, która ustawi fokus na żądane pole tekstowe.

Espo
źródło
14

Po prostu wpisz autofokus w polu tekstowym. To jest proste i działa tak:

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

Mam nadzieję że to pomoże.

Arjun
źródło
1
to jest dobre, ale problem polega na tym, że jeśli masz kroki ze stylem przesuwania, nie byłoby to przydatne, szczególnie jeśli typ wejścia jest na kroku 3 lub kroku 4 dla ex
Kobe Bryan
12

Możesz to łatwo zrobić używając jquery w następujący sposób:

<script type="text/javascript">

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

</script>

wywołując tę ​​funkcję w $(document).ready() .

Oznacza to, że ta funkcja zostanie wykonana, gdy DOM będzie gotowy.

Więcej informacji na temat funkcji READY można znaleźć pod adresem : http://api.jquery.com/ready/

Amir Chatrbahr
źródło
11

Używając zwykłego vanilla html i javascript

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

Dla tych, którzy używają platformy .net i asp.net 2.0 lub nowszej, jest to trywialne. Jeśli używasz starszych wersji frameworka, musisz napisać trochę javascript, podobnie jak powyżej.

W programie obsługi OnLoad (zazwyczaj page_load, jeśli używasz szablonu strony stockowej dostarczonego z programem Visual Studio) możesz użyć:

DO#

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

(* Uwaga: Usunąłem znak podkreślenia z nazwy funkcji, która jest generalnie Page_Load, ponieważ w bloku kodu odmówił prawidłowego renderowania! Nie widziałem w dokumentacji znaczników, jak uzyskać podkreślenia, aby renderować bez znaku zmiany znaczenia.)

Mam nadzieję że to pomoże.

Jon
źródło
7

IMHO, najczystszym sposobem na wybranie pierwszego, widocznego, włączonego pola tekstowego na stronie, jest użycie jQuery i zrobienie czegoś takiego:

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

Mam nadzieję, że to pomoże ...

Dzięki...

wskrzesić
źródło
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
źródło
5

Ogólnie radziłbym nie kraść fokusu z paska adresu. ( Jeff już o tym mówił. )

Załadowanie strony internetowej może zająć trochę czasu, co oznacza, że ​​zmiana fokusu może nastąpić po dłuższym czasie od wpisania adresu URL pae przez użytkownika. Wtedy mógł zmienić zdanie i wrócić do wpisywania adresów URL, podczas gdy ty będziesz ładować swoją stronę i kraść fokus, aby umieścić ją w polu tekstowym.

To jedyny powód, dla którego usunąłem Google z mojej strony początkowej.

Oczywiście, jeśli kontrolujesz sieć (sieć lokalna) lub jeśli celem zmiany jest rozwiązanie ważnego problemu z użytecznością, zapomnij o wszystkim, co właśnie powiedziałem :)

Vincent Robert
źródło
W niektórych przypadkach zgadzam się z tobą. Jednak w moim konkretnym przypadku wyświetlam mały div, który ma tylko jedno pole wprowadzania. Użytkownik powinien coś wpisać i natychmiast zamknąć div, więc ustawienie fokusa jest przydatne.
Mark Biek,
2

Miałem nieco inny problem. Chciałem autofocus, ale chciałem, żeby placeholdertekst pozostał w różnych przeglądarkach. Niektóre przeglądarki ukrywały placeholdertekst, gdy tylko pole było skoncentrowane, inne zachowywały go. Musiałem albo uzyskać symbole zastępcze pozostające w różnych przeglądarkach, co ma dziwne efekty uboczne, albo przestać ich używać autofocus.

Więc nasłuchiwałem pierwszego klucza wpisanego względem znacznika body i przekierowałem ten klucz do docelowego pola wejściowego. Następnie wszystkie zaangażowane programy obsługi zdarzeń zostają zabite, aby zachować porządek.

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
źródło
0

Możliwe jest ustawienie autofocusna elementach wejściowych

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
oscar castellon
źródło
-1

Jeśli korzystasz z ASP.NET, możesz użyć

yourControlName.Focus()

w kodzie na serwerze, który doda odpowiedni JavaScript do strony.

Inne struktury po stronie serwera mogą mieć równoważną metodę.

Andrew Morton
źródło
-3

Użyj poniższego kodu. U mnie to działa

jQuery("[id$='hfSpecialty_ids']").focus()
srikanth
źródło