Comment pouvez-vous définir le focus sur un élément d'entrée HTML sans avoir tout le HTML?

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

  •  03-07-2019
  •  | 
  •  

Question

Tout d'abord, l'arrière-plan: Je travaille dans Tapestry 4, de sorte que le code HTML d’une page donnée est assemblé à partir de divers éléments HTML dispersés dans l’application. Pour le composant sur lequel je travaille, je n'ai pas la balise <body>, je ne peux donc pas lui attribuer d'attribut onload.

Le composant a un élément d'entrée qui doit être activé lors du chargement de la page. Est-ce que quelqu'un connaît un moyen de définir le focus sur une entrée de fichier (ou toute autre entrée de type texte) lors du chargement de page sans accès à la balise body?

J'ai essayé d'insérer un script dans le corps comme
document.body.setAttribute('onload', 'setFocus()')
(où setFocus est une fonction définissant le focus sur l'élément d'entrée du fichier), mais cela n'a pas fonctionné. Je ne peux cependant pas dire que j'ai été surpris par cela.

EDIT:
Comme il a été dit, je dois effectivement le faire avec un composant de page. J'ai fini par ajouter des entrées de type fichier au script que nous utilisons pour mettre en évidence la première entrée modifiable et visible sur une page. En recherchant ce problème, je n'ai trouvé aucun problème de sécurité.

Était-ce utile?

La solution

Cela a bien fonctionné pour moi: 

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

Autres conseils

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

doit être utile je pense !!!

vous pouvez donner à la fenêtre un gestionnaire de chargement 

window.onload = setFocus;

Je pense que votre encapsulation pose un problème fondamental. Bien que dans la plupart des cas, vous puissiez attacher un gestionnaire d’événements à l’événement onload - voir http: // ejohn .org / projects / flexible-javascript-events / de John Resig pour savoir comment faire cela, setFocus doit être géré par un composant de page, car vous ne pouvez pas avoir deux composants sur votre page nécessitant qu'ils obtiennent le focus. lors du chargement de la page.

Essayez de jouer avec attribut de tabulation

Tout d’abord, le fichier d’entrée n’est pas le même que les autres entrées, vous devez garder cela à l’esprit .... c’est pour des raisons de sécurité. Lorsque le fichier d'entrée devient actif, il doit être lu uniquement ou le navigateur doit ouvrir une boîte de dialogue pour choisir un fichier.

Maintenant, pour les autres entrées, vous pouvez essayer un événement onload sur certains de vos éléments ... (pas seulement le corps a l'événement onload) ou vous pouvez utiliser du javascript en ligne au milieu du code HTML. Si vous mettez du code javascript sans dire que c'est une fonction, il s'exécute pendant que le navigateur le lit. Quelque chose comme: 

<script type="text/javascript">

function yourFunction()
{
   ...;
};

alert('hello world!");

yourFunction();

</script>

La fonction sera exécutée après l'alerte au moment où le navigateur la lit.

Si vous le pouvez, vous devriez utiliser jQuery pour faire votre javascript. Cela rendra votre vie tellement facile ....:)

Avec jQuery , procédez comme suit: 

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

Avec du javascript simple, vous pouvez le faire comme ceci: 

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

Pour une solution plus élaborée avec du javascript simple, voir Définir le focus sur la première entrée de la page Web sur CodeProject.

La solution de Scunliffe présente un avantage en termes de convivialité.

Lorsque les scripts de page se chargent lentement, appelez focus () depuis & "onLoad &"; L'événement fait une page très méchante & "; saute &"; si l'utilisateur fait défiler la page. Il s’agit donc d’une approche plus conviviale: 

<input id="..."></input>
... really small piece of HTML ...
<script>getTheDesiredInput().focus();</script>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top