Wie setzen Sie den Fokus automatisch auf ein Textfeld, wenn eine Webseite geladen wird?

Antworten:

245

Wenn Sie jquery verwenden:

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

oder Prototyp:

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

oder einfaches Javascript:

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

Beachten Sie jedoch, dass dies andere On-Load-Handler ersetzt. Suchen Sie daher in Google nach addLoadEvent (), um Onload-Handler sicher anzuhängen, anstatt sie zu ersetzen.

Ben Scheirman
quelle
3
Warum nicht Handler auf das Körperelement setzen? Irgendeine Referenz? Vielen Dank
Alexander Torstling
7
Weil es viel sauberer ist, Javascript vom HTML zu trennen. Sie sollten visuellen Elementen in Ihrem HTML-Code Skriptverhalten hinzufügen.
Ben Scheirman
94

In HTML gibt es ein autofocusAttribut für alle Formularfelder. In Dive Into HTML 5 gibt es ein gutes Tutorial dazu . Leider wird es derzeit von IE-Versionen unter 10 nicht unterstützt .

So verwenden Sie das HTML 5-Attribut und greifen auf eine JS-Option zurück:

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

Es sind keine jQuery-, Onload- oder Event-Handler erforderlich, da sich das JS unter dem HTML-Element befindet.

Bearbeiten: Ein weiterer Vorteil ist, dass JavaScript in einigen Browsern deaktiviert ist und Sie das JavaScript entfernen können, wenn Sie ältere Browser nicht unterstützen möchten.

Bearbeiten 2: Firefox 4 unterstützt jetzt das autofocusAttribut und lässt den IE ohne Unterstützung.

dave1010
quelle
3
Was ist mit dem autofocus="aufofocus"? Alle von Ihnen angegebenen Links sagen nur, dass Sie das Attribut hinzufügen sollen : autofocus.
Gerrat
6
In den Tagen von XHTML und HTML4 war es üblich, attribute="value"boolesche Attribute zu verwenden. HTML5 kam mit der "leeren Attributsyntax" und wir haben die Redundanz entfernt. Jetzt können wir tun<input checked disabled autofocus data-something>
dave1010
Ich mag diesen Ansatz ... Dieser Code gehört zur Eingabe ... wird die Eingabe und den Boom los, der zugehörige Code ist genau dort ... Wir verlieren uns heutzutage so sehr ... Der Kreis schließt sich jetzt und versucht zu vereinfachen. ..
Serge
16

Sie müssen Javascript verwenden:

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

@Ben merkt an, dass Sie solche Ereignishandler nicht hinzufügen sollten. Während dies eine andere Frage ist, empfiehlt er, dass Sie diese Funktion verwenden:

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

Rufen Sie dann addLoadEvent auf Ihrer Seite auf und verweisen Sie auf eine Funktion, die den Fokus auf das gewünschte Textfeld legt.

Espo
quelle
14

Schreiben Sie einfach den Autofokus in das Textfeld. Das ist einfach und funktioniert so:

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

Hoffe das hilft.

Arjun
quelle
1
Das ist gut , aber das Problem ist, wenn Sie die Schritte mit Schiebe Stil haben, das wäre besonders nicht nützlich sein , wenn der Eingangstyp ist auf den Schritt 3 oder 4 für die Ex
Kobe Bryan
12

Sie können dies einfach tun, indem Sie jquery folgendermaßen verwenden:

<script type="text/javascript">

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

</script>

durch Aufrufen dieser Funktion in $(document).ready().

Dies bedeutet, dass diese Funktion ausgeführt wird, wenn das DOM bereit ist.

Weitere Informationen zur READY-Funktion finden Sie unter: http://api.jquery.com/ready/

Amir Chatrbahr
quelle
11

Mit einfachem Vanille-HTML und 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>

Für diejenigen, die das .net-Framework und asp.net 2.0 oder höher verwenden, ist es trivial. Wenn Sie ältere Versionen des Frameworks verwenden, müssen Sie ein ähnliches Javascript wie oben schreiben.

In Ihrem OnLoad-Handler (im Allgemeinen page_load, wenn Sie die mit Visual Studio gelieferte Stock-Seitenvorlage verwenden) können Sie Folgendes verwenden:

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

(* Hinweis: Ich habe das Unterstrichzeichen aus dem Funktionsnamen entfernt, der im Allgemeinen Page Load ist, da es in einem Codeblock nicht ordnungsgemäß gerendert werden konnte. In der Markup-Dokumentation konnte ich nicht sehen, wie Unterstriche zum unübersichtlichen Rendern gebracht werden.)

Hoffe das hilft.

Jon
quelle
7

IMHO, die 'sauberste' Möglichkeit, das erste sichtbare, aktivierte Textfeld auf der Seite auszuwählen, besteht darin, jQuery zu verwenden und Folgendes zu tun:

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

Hoffentlich hilft das...

Vielen Dank...

beleben
quelle
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
quelle
5

Als allgemeinen Rat würde ich empfehlen, den Fokus nicht aus der Adressleiste zu stehlen. ( Jeff hat bereits darüber gesprochen. )

Das Laden der Webseite kann einige Zeit dauern. Dies bedeutet, dass Ihre Fokusänderung einige Zeit nach der Eingabe der pae-URL durch den Benutzer erfolgen kann. Dann hätte er seine Meinung ändern und wieder URLs eingeben können, während Sie Ihre Seite laden und den Fokus stehlen, um sie in Ihr Textfeld einzufügen.

Dies ist der einzige Grund, warum ich Google als Startseite entfernt habe.

Wenn Sie das Netzwerk (lokales Netzwerk) steuern oder wenn der Fokuswechsel darin besteht, ein wichtiges Usability-Problem zu lösen, vergessen Sie natürlich alles, was ich gerade gesagt habe :)

Vincent Robert
quelle
In einigen Fällen stimme ich Ihnen zu. In meinem speziellen Fall tauche jedoch ein kleines Div auf, das nur ein Eingabefeld enthält. Der Benutzer soll etwas eingeben und das Div sofort schließen, so dass das Einstellen des Fokus praktisch ist.
Mark Biek
2

Ich hatte ein etwas anderes Problem. Ich wollte autofocus, wollte aber, dass der placeholderText browserübergreifend bleibt. Einige Browser würden den placeholderText ausblenden, sobald das Feld fokussiert ist, andere würden ihn behalten. Ich musste entweder Platzhalter dazu bringen, browserübergreifend zu bleiben, was seltsame Nebenwirkungen hat, oder die Verwendung einstellen autofocus.

Also habe ich auf den ersten Schlüssel gewartet, der gegen das Body-Tag eingegeben wurde, und diesen Schlüssel in das Ziel-Eingabefeld umgeleitet. Dann werden alle beteiligten Event-Handler getötet, um die Dinge sauber zu halten.

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

Es ist möglich, autofocusEingabeelemente einzustellen

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
Oscar Castellon
quelle
-1

Wenn Sie ASP.NET verwenden, können Sie verwenden

yourControlName.Focus()

im Code auf dem Server, der der Seite das entsprechende JavaScript hinzufügt.

Andere serverseitige Frameworks verfügen möglicherweise über eine entsprechende Methode.

Andrew Morton
quelle
-3

Verwenden Sie den folgenden Code. Bei mir funktioniert es

jQuery("[id$='hfSpecialty_ids']").focus()
Srikanth
quelle