Comment définissez-vous automatiquement le focus sur une zone de texte lorsqu'une page web se charge?
Comment définissez-vous automatiquement le focus sur une zone de texte lors du chargement d'une page web?
Existe-t-il une balise HTML pour le faire ou doit-elle être effectuée via Javascript?
12 réponses
Si vous utilisez jquery:
$(function() {
$("#Box1").focus();
});
Ou prototype:
Event.observe(window, 'load', function() {
$("Box1").focus();
});
Ou JavaScript simple:
window.onload = function() {
document.getElementById("Box1").focus();
};
Cependant, gardez à l'esprit que cela remplacera d'autres gestionnaires de chargement, alors recherchez addLoadEvent() dans google pour un moyen sûr d'ajouter des gestionnaires de chargement plutôt que de remplacer.
En HTML, il y a un autofocus attribuez à tous les champs de formulaire. Il y a un bon tutoriel à ce sujet dans Dive Into HTML 5 . Malheureusement, il n'est actuellement pas pris en charge par les versions IE inférieures à 10.
Pour utiliser L'attribut HTML 5 et revenir à une option JS:
<input id="my-input" autofocus="autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>
Aucun gestionnaire jQuery, onload ou événement n'est requis, car le JS est en dessous de L'élément HTML.
Edit: un autre avantage est qu'il fonctionne avec JavaScript dans les navigateurs et vous pouvez supprimez le JavaScript lorsque vous ne souhaitez pas prendre en charge les anciens navigateurs.
Edit 2: Firefox 4 prend désormais en charge l'attribut autofocus, laissant simplement IE sans support.
Vous devez utiliser javascript:
<BODY onLoad="document.getElementById('myButton').focus();">
@Ben note que vous ne devriez pas ajouter de gestionnaires d'événements comme celui-ci. Bien que ce soit une autre question, il vous recommande d'utiliser cette fonction:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
Puis mettez un appel à addLoadEvent sur votre page et référencez une fonction qui définit le focus sur la zone de texte souhaitée.
En utilisant simplement vanille html et javascript
<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>
Pour ceux qui utilisent le framework. net et asp.net 2.0 ou supérieur, c'est trivial. Si vous utilisez des versions plus anciennes du framework, vous devez écrire du javascript similaire à celui ci-dessus.
Dans votre gestionnaire OnLoad (généralement page_load si vous utilisez le modèle de page stock fourni avec visual studio), vous pouvez utiliser:
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
(* Notez que j'ai supprimé le caractère de soulignement de le nom de la fonction qui est généralement Page_Load puisque dans un bloc de code il a refusé de rendre correctement! Je ne pouvais pas voir dans la documentation de balisage comment obtenir des traits de soulignement pour rendre non échappé.)
J'espère que cela aide.
Vous pouvez le faire facilement en utilisant jquery de cette façon:
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>
En appelant cette fonction dans $(document).ready().
Cela signifie que cette fonction s'exécutera lorsque le DOM sera prêt.
Pour plus d'informations sur la fonction READY, reportez-vous à: http://api.jquery.com/ready/
Il suffit D'écrire autofocus dans le champ de texte. C'est simple et cela fonctionne comme ceci:
<input name="abc" autofocus></input>
J'espère que cela aide.
<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>
À mon humble avis, la façon la plus propre de sélectionner le premier champ de texte visible et activé sur la page est d'utiliser jQuery et de faire quelque chose comme ceci:
$(document).ready(function() {
$('input:text[value=""]:visible:enabled:first').focus();
});
J'espère que ça aide...
Merci...
En tant que conseil général, je recommande de ne pas voler le focus de la barre d'adresse. (Jeff en a déjà parlé.)
La page Web peut prendre un certain temps à charger, ce qui signifie que votre changement de focus peut se produire longtemps après que l'Utilisateur a tapé l'URL pae. Ensuite, il aurait pu changer d'avis et revenir à la saisie d'url pendant que vous chargerez votre page et volerez le focus pour la mettre dans votre zone de texte.
C'est la seule et unique raison qui m'a fait supprimer Google ma page de démarrage.
Bien sûr, si vous contrôlez le réseau (réseau local) ou si le changement de focus est de résoudre un problème d'utilisabilité important, oubliez tout ce que je viens de dire:)
J'ai eu un problème légèrement différent. Je voulais autofocus, mais, je voulais que le texte placeholder reste, cross-browser. Certains navigateurs cacheraient le texte placeholder dès que le champ se concentrerait, certains le garderaient. Je devais soit obtenir des espaces réservés restant cross-browser, ce qui a des effets secondaires étranges, ou arrêter d'utiliser autofocus.
J'ai donc écouté la première clé tapée contre la balise body, et redirigé cette clé dans le champ de saisie cible. Ensuite, tous les gestionnaires d'événements impliqués tués garder les choses propres.
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);
Si vous utilisez ASP.NET ensuite, vous pouvez utiliser
yourControlName.Focus()
Dans le code sur le serveur, qui ajoutera JavaScript approprié dans la page.
Les autres frameworks côté serveur peuvent avoir une méthode équivalente.
Utilisez le code ci-dessous. Pour moi, cela fonctionne
jQuery("[id$='hfSpecialty_ids']").focus()