Come puoi impostare lo stato attivo su un elemento di input HTML senza avere tutto l'HTML?

StackOverflow https://stackoverflow.com/questions/808908

  •  03-07-2019
  •  | 
  •  

Domanda

Innanzitutto, lo sfondo: Sto lavorando in Tapestry 4, quindi l'HTML di una determinata pagina è cucito insieme da vari frammenti di HTML sparsi in tutta l'applicazione. Per il componente su cui sto lavorando non ho il tag <body>, quindi non posso assegnargli un onload attributo.

Il componente ha un elemento di input che deve essere attivo quando la pagina viene caricata. Qualcuno conosce un modo per impostare lo stato attivo su un input di file (o qualsiasi altro input di tipo testo) sul caricamento della pagina senza accesso al tag body?

Ho provato ad inserire script nel corpo come
document.body.setAttribute('onload', 'setFocus()')
(dove setFocus è una funzione che mette a fuoco l'elemento di input del file), ma che non ha funzionato. Non posso dire di esserne rimasto sorpreso però.

EDIT:
Come è stato affermato, ho davvero bisogno di farlo con un componente di pagina. Ho finito per aggiungere input di tipo file allo script che usiamo per focalizzare il primo input modificabile e visibile su una pagina. Nella ricerca di questo problema non ho riscontrato alcun problema di sicurezza nel fare questo.

È stato utile?

Soluzione

Questo ha funzionato bene per me: 

<script>
  function getLastFormElem(){
    var fID = document.forms.length -1;
    var f = document.forms[fID];
    var eID = f.elements.length -1;
    return f.elements[eID];
  }
</script>


<input name="whatever" id="maybesetmaybenot" type="text"/>
<!-- any other code except more form tags -->

<script>getLastFormElem().focus();</script>

Altri suggerimenti

<script>
window.onload = function()  {
     document.getElementById('search_query').select();
    //document.getElementById('search_query').value = ''; 
    // where 'search_query' will be the id of the input element
};
</script>

deve essere utile, credo !!!

puoi dare alla finestra un gestore onload 

window.onload = setFocus;

Penso che tu abbia un problema fondamentale con l'incapsulamento. Sebbene nella maggior parte dei casi sia possibile associare un gestore eventi all'evento onload, consultare http: // ejohn .org / projects / flexible-javascript-events / di John Resig per come fare questo, setFocus deve essere gestito da un componente della pagina poiché non è possibile avere due componenti sulla pagina che richiedono che siano focalizzati quando la pagina viene caricata.

Prova a giocare con tabstop attributo

Prima di tutto, il file di input non è uguale agli altri input, devi tenerlo a mente .... questo è per motivi di sicurezza. Quando il file di input viene attivato, dovrebbe essere di sola lettura oppure il browser dovrebbe visualizzare una finestra di dialogo per scegliere alcuni file.

Ora, per gli altri input potresti provare qualche evento onload su alcuni dei tuoi elementi ... (non solo il corpo ha l'evento onload) o potresti usare javascript inline nel mezzo dell'html. Se inserisci codice javascript senza dire che è una funzione che viene eseguita mentre il browser lo legge. Qualcosa del tipo: 

<script type="text/javascript">

function yourFunction()
{
   ...;
};

alert('hello world!");

yourFunction();

</script>

La funzione verrà eseguita dopo l'avviso proprio quando il browser la legge.

Se puoi, dovresti usare jQuery per fare il tuo javascript. Renderà la tua vita davvero molto facile .... :)

Con jQuery si potrebbe fare così: 

$(function() {
    $("input:file").eq(0).focus()
})

Con javascript semplice si potrebbe fare in questo modo: 

var oldWindowOnload = window.onload; // be nice with other uses of onload 
window.onload = function() {
    var form = document.forms[0];
    for(i=0; i < form.length; i++) {
        if (form[i].type == "file") {
            form[i].focus();
        }
    }
    oldWindowOnload();
}

Per una soluzione più elaborata con javascript semplice, consultare Imposta lo stato attivo sul primo input nella pagina Web su CodeProject.

La soluzione di Scunliffe ha un vantaggio di usabilità.

Quando gli script di pagina si caricano lentamente, chiamando focus () da " onLoad " evento rende una pagina molto cattiva " salta " se l'utente scorre via la pagina. Quindi questo è un approccio più user friendly: 

<input id="..."></input>
... really small piece of HTML ...
<script>getTheDesiredInput().focus();</script>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top