Come si imposta automaticamente lo stato attivo su una casella di testo quando viene caricata una pagina Web?


Risposte:


245

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.


3
Perché non mettere i gestori sull'elemento del corpo? Qualche riferimento? Grazie
Alexander Torstling,

7
Perché è molto più pulito separare javascript dall'HTML. Dovresti aggiungere un comportamento di scripting agli elementi visivi nel tuo HTML.
Ben Scheirman,

94

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.


3
Cosa c'è con il autofocus="aufofocus"? Tutti i link che hai fornito solo dire per aggiungere l'attributo: autofocus.
Gerrat,

6
Ai tempi di XHTML e HTML4 era comune fare 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>
dave1010 il

Mi piace questo approccio ... Quel codice appartiene all'input ... sbarazzarsi dell'input e del boom, il codice associato è proprio lì ... Ci perdiamo così tanto in questi giorni ... Andando al punto di partenza ora proviamo a semplificare. ..
Serge

16

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.


14

Scrivi semplicemente l'autofocus nel campo di testo. Questo è semplice e funziona così:

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

Spero che questo ti aiuti.


1
questo è buono ma il problema è che, se hai passaggi con stile scorrevole, non sarebbe utile esp se il tipo di input si trova al passaggio 3 o al passaggio 4 per esempio
Kobe Bryan,

12

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/


11

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.


7

IMHO, il modo più "pulito" per selezionare il primo campo di testo visibile, abilitato nella pagina, è usare jQuery e fare qualcosa del genere:

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

Spero che aiuti...

Grazie...


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>  

5

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


Sono d'accordo con te in alcuni casi. Tuttavia, nel mio caso specifico, sto spuntando un piccolo div che solo una casella di input. L'utente dovrebbe inserire qualcosa e chiudere immediatamente il div, quindi l'impostazione della messa a fuoco è utile.
Mark Biek,

2

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

https://jsfiddle.net/b9chris/qLrrb93w/


0

È possibile impostare autofocuselementi di input

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">

-1

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.


-3

Usa il codice qui sotto. Per me funziona

jQuery("[id$='hfSpecialty_ids']").focus()
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.