Hoe stel je automatisch de focus in op een tekstvak wanneer een webpagina wordt geladen?
Is daar een HTML-tag voor of moet het via Javascript?
Antwoord 1, autoriteit 100%
Als je jQuery gebruikt:
$(function() {
$("#Box1").focus();
});
of prototype:
Event.observe(window, 'load', function() {
$("Box1").focus();
});
of gewoon javascript:
window.onload = function() {
document.getElementById("Box1").focus();
};
Houd er echter rekening mee dat dit andere onload-handlers zal vervangen, dus zoek addLoadEvent() op in Google voor een veilige manier om onload-handlers toe te voegen in plaats van te vervangen.
Antwoord 2, autoriteit 38%
In HTML is er een autofocusattribuutaan alle formuliervelden. Er is een goede tutorial over in Dive Into HTML 5. Helaas wordt het momenteel niet ondersteunddoor IE-versies van minder dan 10.
Om het HTML 5-attribuut te gebruiken en terug te vallen op een JS-optie:
<input id="my-input" autofocus="autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>
Er zijn geen jQuery-, onload- of event-handlers vereist, omdat de JS onder het HTML-element staat.
Bewerken: een ander voordeel is dat het in sommige browsers werkt met JavaScript uitgeschakeld en dat je het JavaScript kunt verwijderen als je oudere browsers niet wilt ondersteunen.
Bewerken 2: Firefox 4 ondersteunt nu het kenmerk autofocus, waardoor IE gewoon zonder ondersteuning blijft.
Antwoord 3, autoriteit 7%
Je moet javascript gebruiken:
<BODY onLoad="document.getElementById('myButton').focus();">
@Ben merkt op dat je geen event handlers zoals deze moet toevoegen. Hoewel dat een andere vraag is, raadt hij u aan deze functie te gebruiken:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
En roep dan addLoadEvent op je pagina aan en verwijs naar een functie die de focus op je gewenste tekstvak zet.
Antwoord 4, autoriteit 6%
Schrijf gewoon autofocus in het tekstveld. Dit is eenvoudig en het werkt als volgt:
<input name="abc" autofocus></input>
Hopelijk helpt dit.
Antwoord 5, autoriteit 5%
Je kunt het gemakkelijk doen door jQuery op deze manier te gebruiken:
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>
door deze functie aan te roepen in $(document).ready().
Het betekent dat deze functie wordt uitgevoerd wanneer de DOM gereed is.
Voor meer informatie over de READY-functie, zie: http://api.jquery.com/ready/
6, Autoriteit 2%
Als algemeen advies zou ik aanraden om de focus van de adresbalk niet te stelen. (Jeff hier al over gepraat. )
Webpagina kan enige tijd duren om te laden, wat betekent dat uw focuswijziging op enkele lange tijd kan gebeuren nadat de gebruiker de PAE-URL heeft getypt. Toen had hij van gedachten kunnen veranderen en teruggaan naar URL-typen terwijl u uw pagina aan het laden bent en de focus steelt om het in uw tekstvak te plaatsen.
Dat is de enige reden die me Google als mijn startpagina maakte.
Natuurlijk, als u het netwerk (lokaal netwerk) bedient of als de focuswijziging is om een belangrijke bruikbaarheidsprobleem op te lossen, vergeet alles wat ik zojuist heb gezegd 🙂