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

211

Jedes Javascript-Buch wird Ihnen sagen, dass Sie keine Handler auf das Körperelement setzen.

I'f Sie verwenden jquery:

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

oder Prototyp:

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

oder schlicht javascript:

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

obwohl im Auge behalten, dass dies andere ersetzen Auf Lade-Handlern suchen Sie also in addLoadEvent() in Google nach einer sicheren Möglichkeit, Onload-Handler anzuhängen, anstatt sie zu ersetzen Ing.

Quelle

2008-09-05 13:46:38

+3

Warum nicht Handler auf das Körperelement? Irgendwelche Referenz? Danke –

+7

Weil es viel sauberer ist, Javascript von der HTML zu trennen.Sie sollten visueller Elemente in Ihrem HTML Scripting-Verhalten hinzufügen. –

+3

@BenScheirman und 5 Jahre später haben wir JSX –

13

Sie müssen Javascript verwenden:

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

@ Ben stellt fest, dass Sie nicht Event-Handler wie folgt hinzufügen sollte. Während die 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(); 
    } 
    } 
}

und legte dann einen Anruf an addLoadEvent auf Ihrer Seite und die Funktion, die setzt den Fokus auf Sie gewünschte Textfeld verweisen.

Quelle

2008-09-05 13:35:47 Espo

5

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

Quelle

2008-09-05 13:39:37

+2

Zu viele '' '. Sie brauchen:' dave1010

9

mit Normalpapier 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 dort verwendet FRAMEWORK und asp.net 2,0 oder höher, sein trivial. Wenn Sie ältere Versionen des Frameworks verwenden, müssten Sie Javascript ähnlich wie oben beschrieben schreiben.

In Ihrem OnLoad Handler (in der Regel Page_load wenn Sie die Aktie Seitenvorlage verwenden, der mit Visual Studio im Lieferumfang enthalten) können Sie:

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 den Unterstrich vom Funktionsnamen entfernt, der normalerweise Page_Load ist, da er in einem Codeblock nicht richtig gerendert wurde! Ich konnte in der Markup-Dokumentation nicht sehen, wie Unterstriche zu erhalten, um Unescaped zu machen.)

Hoffe, dass dies hilft.

Quelle

2008-09-05 14:05:10 Jon

4

Als einen allgemeinen Rat, würde ich empfehlen, nicht den Fokus von der Adressleiste zu stehlen. (Jeff already talked about that.)

Web-Seite kann einige Zeit zum Laden benötigen, was bedeutet, dass die Fokusänderung einige Zeit nach der Eingabe der pae-URL durch den Benutzer erfolgen kann.Dann könnte er es sich anders überlegt haben und zurück zur URL tippen, während Sie Ihre Seite laden und den Fokus stehlen, um ihn in Ihre Textbox zu legen.

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

Natürlich, wenn Sie das Netzwerk (lokale Netzwerk) steuern oder wenn die Fokusänderung ein wichtiges Usability-Problem zu lösen ist, vergessen alles, was ich gerade gesagt habe :)

Quelle

2008-09-06 13:53:23

+0

Ich stimme in einigen Fällen mit Ihnen überein, aber in meinem speziellen Fall, tauche ich ein kleines div auf, das nur ein Eingabefeld ist.Der Benutzer soll etwas eingeben und das div so sofort schließen der Fokus ist praktisch –

83

In HTML gibt es eine autofocus attribute für alle Formularfelder. Es gibt ein gutes Tutorial dazu in Dive Into HTML 5. Leider ist es zur Zeit nicht supported von IE-Versionen kleiner als 10.

Um das HTML-5-Attribut und fallen zurück in eine JS-Option zu verwenden:

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

Keine jQuery, onload oder Event-Handler benötigt werden, da die JS ist unterhalb des HTML-Elements.

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

Edit 2: Firefox 4 unterstützt jetzt das autofocus Attribut, nur verlassen IE ohne Unterstützung.

Quelle

2010-06-15 08:54:21 dave1010

+2

Was ist mit dem 'Autofokus =" Auffokus "?? Alle Links, die Sie zur Verfügung gestellt haben, sagen nur, um das Attribut hinzuzufügen:' Autofokus'. – Gerrat

+4

Ba ck in den Tagen von XHTML und HTML4 war es üblich, Attribut = "Wert" für boolesche Attribute zu tun. HTML5 kam mit der "leeren Attributsyntax" und wir haben die Redundanz fallen gelassen. Jetzt können wir '' – dave1010

5

IMHO, der ‚saubersten‘ Weg, um das erste, sichtbares fähige Textfeld auf der Seite zu wählen, ist jQuery zu verwenden und so etwas zu tun:

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

Hoffnung, dass ...

hilft

Dank ...

Quelle

2010-07-23 08:03:46 revive

8

Sie es mithilfe von jquery auf diese Weise leicht tun können:

<script type="text/javascript"> 

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

</script>

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

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

Weitere Informationen über die READY-Funktion finden Sie: http://api.jquery.com/ready/

Quelle

2011-09-01 02:01:38

-1

den Code unten verwenden. Für mich funktioniert es

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

Quelle

2012-10-10 14:32:16 srikanth

1

Ich hatte ein etwas anderes Problem. Ich wollte autofocus, aber wollte, dass der placeholder Text bleibt, Cross-Browser. Einige Browser würden den Text placeholder ausblenden, sobald das Feld fokussiert wäre, einige würden es behalten. Ich musste Platzhalter dafür sorgen, dass sie browserübergreifend bleiben, was seltsame Nebenwirkungen hat, oder aufhören, autofocus zu verwenden.

So hörte ich für den ersten Schlüssel, der gegen das body-Tag eingegeben wurde, und leitete diesen Schlüssel in das Zieleingabefeld um. 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/

Quelle

2016-12-01 21:05:22

0

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

in den Code auf dem Server, die entsprechende JavaScript auf der Seite hinzufügen wird.

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

Quelle

2016-12-01 21:15:55

6

Einfach Autofokus in das Textfeld schreiben. Das ist einfach und es funktioniert wie folgt:

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

Hoffnung, das hilft.

Quelle

2017-01-16 11:26:01 Arjun

+0

das ist gut, aber das Problem ist, wenn Sie Schritte mit Schiebe-Stil haben, das wäre nicht nützlich esp, wenn der Eingabe-Typ auf Schritt 3 oder Schritt 4 ist für Beispiel –

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

Antwort

Verwandte Themen