focus() à l'entrée sans défilement
J'ai une recherche d'entrée de texte que je voudrais appliquer un focus()
lors du chargement de la page, le problème est que le focus
automatiquement la fonction ne un faites défiler jusqu'à ce domaine. Toute solution pour désactiver ce parchemin?
<input id="search_terms" type="text" />
<script>
document.getelementbyId('search-terms').focus();
</script>
- Vous voulez capturer vos utilisateurs frappes sans eux voir l'élément qu'ils tapent dans?
- Pourquoi considérez-vous de ce défilement d'être un problème?
- Vous devez régler la position de défilement à l'aide de JavaScript après charge: de la fenêtre.scrollTo(x,y)
- J'ai une application qui a besoin exactement ce comportement. J'ai une page qui affiche les données de trois mois consécutifs dans l'année. Il y a des boutons suivant et précédent qui changer trois mois que vous avez vue. Lorsque l'utilisateur clique sur suivant ou précédent, je recentrer le curseur sur la dernière entrée sélectionnée, permettant aux utilisateurs de garder une trace de leur position (si ils sont de la saisie de données ou la vérification des chiffres). Dans ce cas, le défilement est vraiment choquante, et vous arrête en appuyant sur la prev/next boutons à plusieurs reprises.
- Cela m'a juste conduit absolument fou. Apparemment il y a une option que vous pouvez passer à l'accent appelé preventScroll: developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
Vous devez vous connecter pour publier un commentaire.
Voici une solution complète:
setTimeout(function() { window.scrollTo(x, y); }, 100);
au lieu dewindow.scrollTo(x, y);
.Il y a un nouveau WHATWG standard qui vous permet de vous passer d'un objet à
focus()
qui indique que vous souhaitez empêcher le navigateur de défilement de l'élément dans la vue:Il a été pris en charge depuis Chrome 64 et Bord Initié Aperçu de construire 17046, et devrait être à l'atterrissage dans Firefox 68 – une matrice de prise en charge est disponible sur le web de la plate-forme de tests ici.
Si vous utilisez jQuery, vous pouvez également le faire:
et puis
var x = $(document).scrollLeft(), y = $(document).scrollTop();
afin de le faire fonctionner dans IE10.Un peu modifié la version qui prend en charge plusieurs navigateurs (incl. IE9)
Les réponses ici ne prennent pas soin de défilement sur l'ensemble de la hiérarchie, mais le principal, les barres de défilement uniquement. Cette réponse va s'occuper de tout:
À compter d'aujourd'hui, la meilleure façon de définir le focus sur un élément sur la page de la charge est à l'aide de la
autofocus
attribut. Cela n'implique pas de défilement.La
autofocus
attrubute fait partie de la norme HTML5 et est pris en charge par tous les navigateurs principaux, avec la seule exception notable de Internet Explorer 9 ou une version antérieure.