Risposte:
Se stai usando jquery:
$(function() {
$("#Box1").focus();
});
o prototipo:
Event.observe(window, 'load', function() {
$("Box1").focus();
});
o javascript semplice:
window.onload = function() {
document.getElementById("Box1").focus();
};
tuttavia tieni presente che questo sostituirà altri sui gestori di caricamento, quindi cerca addLoadEvent () in google per un modo sicuro di aggiungere gestori di caricamento anziché sostituirli.
In HTML c'è un autofocusattributo a tutti i campi del modulo. C'è un buon tutorial su di esso in Dive Into HTML 5 . Purtroppo al momento non è supportato da versioni di IE inferiori a 10.
Per utilizzare l'attributo HTML 5 e tornare a un'opzione JS:
<input id="my-input" autofocus="autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>
Non sono necessari gestori di jQuery, onload o eventi, poiché JS è al di sotto dell'elemento HTML.
Modifica: un altro vantaggio è che funziona con JavaScript disattivato in alcuni browser e puoi rimuovere JavaScript quando non vuoi supportare i browser più vecchi.
Modifica 2: Firefox 4 ora supporta l' autofocusattributo, lasciando IE senza supporto.
autofocus="aufofocus"? Tutti i link che hai fornito solo dire per aggiungere l'attributo: autofocus.
attribute="value"per gli attributi booleani. HTML5 è arrivato insieme alla "sintassi dell'attributo vuota" e abbiamo eliminato la ridondanza. Ora possiamo fare<input checked disabled autofocus data-something>
Devi usare javascript:
<BODY onLoad="document.getElementById('myButton').focus();">
@Ben osserva che non è necessario aggiungere gestori di eventi come questo. Mentre questa è un'altra domanda, ti consiglia di utilizzare questa funzione:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
Quindi invia una chiamata ad addLoadEvent sulla tua pagina e fai riferimento a una funzione che imposta lo stato attivo sulla casella di testo desiderata.
Scrivi semplicemente l'autofocus nel campo di testo. Questo è semplice e funziona così:
<input name="abc" autofocus></input>
Spero che questo ti aiuti.
Puoi farlo facilmente usando jquery in questo modo:
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>
chiamando questa funzione in $(document).ready() .
Significa che questa funzione verrà eseguita quando il DOM è pronto.
Per ulteriori informazioni sulla funzione READY, consultare: http://api.jquery.com/ready/
Utilizzo di html e javascript semplice alla vaniglia
<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>
Per quelli là fuori che usano il framework .net e asp.net 2.0 o versioni successive, è banale. Se si utilizzano versioni precedenti del framework, è necessario scrivere javascript simile al precedente.
Nel gestore OnLoad (generalmente page_load se si utilizza il modello di pagina stock fornito con Visual Studio) è possibile utilizzare:
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
(* Nota ho rimosso il carattere di sottolineatura dal nome della funzione che è generalmente Page_Load poiché in un blocco di codice si è rifiutato di eseguire il rendering correttamente! Non ho potuto vedere nella documentazione di markup come ottenere caratteri di sottolineatura per renderizzare senza caratteri di escape.)
Spero che questo ti aiuti.
<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>
Come consiglio generale, consiglierei di non rubare il focus dalla barra degli indirizzi. ( Jeff ne ha già parlato. )
Il caricamento della pagina Web può richiedere del tempo, il che significa che la modifica del focus può verificarsi a lungo dopo che l'utente ha digitato l'URL pae. Quindi avrebbe potuto cambiare idea e tornare a scrivere url mentre caricherai la tua pagina e ruberai lo stato attivo per metterlo nella tua casella di testo.
Questo è l'unico motivo che mi ha fatto rimuovere Google come pagina iniziale.
Ovviamente, se controlli la rete (rete locale) o se il focus focus è risolvere un importante problema di usabilità, dimentica tutto quello che ho appena detto :)
Ho avuto un problema leggermente diverso. Volevo autofocus, ma, volevo che il placeholdertesto rimanesse, cross-browser. Alcuni browser nascondono il placeholdertesto non appena il campo si focalizza, altri lo mantengono. Ho dovuto far sì che i segnaposto rimanessero su più browser, con strani effetti collaterali, o smettere di usarli autofocus.
Quindi ho ascoltato la prima chiave digitata sul tag body e ho reindirizzato quella chiave nel campo di input di destinazione. Quindi tutti i gestori di eventi coinvolti vengono uccisi per mantenere le cose pulite.
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);
È possibile impostare autofocuselementi di input
<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
Se si utilizza ASP.NET, è possibile utilizzare
yourControlName.Focus()
nel codice sul server, che aggiungerà JavaScript appropriato nella pagina.
Altri framework lato server possono avere un metodo equivalente.