web-dev-qa-db-fra.com

jQuery focus sans défilement

Comment puis-je me concentrer sur un élément HTML (ex. "A") et ne pas modifier les paramètres de défilement actuels.

Par ex. si j'utilise:

$('#link').focus();

et ce lien n’est pas visible à l’écran (c’est-à-dire sous la zone visible), le navigateur fait défiler la liste pour afficher l’élément. Comment puis-je définir le focus sans mouvement de la barre de défilement? Je dois garder la barre de défilement à la place d'origine.

J'ai essayé cela, mais cela produit un scintillement d'écran, et c'est un hack, pas une solution élégante:

var st=$(document).scrollTop();
$('#link').focus();
$(document).scrollTop(st);

Quelqu'un peut m'aider s'il vous plait?

jqueryfocusscrollbarscroll
32
buzoganylaszlo

Essaye ça:

$.fn.focusWithoutScrolling = function(){
  var x = window.scrollX, y = window.scrollY;
  this.focus();
  window.scrollTo(x, y);
  return this; //chainability

};

et alors

$('#link').focusWithoutScrolling();

Modifier:

Il a été rapporté que cela ne fonctionne pas dans IE10. La solution probable serait d'utiliser:

var x = $(document).scrollLeft(), y = $(document).scrollTop();

mais je ne l'ai pas testé.

43
Felipe Martim

La raison pour laquelle c'est si difficile pour vous, c'est parce que vous n'êtes pas censé le faire. Les navigateurs sont conçus pour aider les utilisateurs à éviter les sites Web qui procèdent de la sorte, car un lien sur lequel le focus a été activé sera activé en appuyant sur la touche Entrée ou sur la touche du clavier, et les utilisateurs souhaitent rarement suivre un lien dont ils ignorent l'existence.

Essayez de travailler avec le navigateur plutôt que contre lui, et vous obtiendrez généralement des utilisateurs plus satisfaits.

3
Martin Jespersen

Utilisez l'option {preventScroll: true} sur la méthode de mise au point. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Si vous utilisez jQuery, essayez $('#el')[0].focus({preventScroll: true}) ou parcourez chaque élément de votre collection.

3
Dan Eastwell

$('#link').css('position', 'fixed').focus().css('position', 'static') fonctionne dans Firefox.

( Edit : Vous ne devriez pas utiliser ce hack)

2
jd.

J'ai le même problème, mais avec des mots: je pense qu'une solution plus élégante serait de donner le focus une fois que l'élément est dans la fenêtre.

Voici ce que je copie/colle (Merci à ADB de ce fil Jquery vérifie si l’élément est visible dans la fenêtre )

$.fn.inView = function(){
    if(!this.length) return false;
    var rect = this.get(0).getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);

};



window.$(window).on('scroll',function(){ 

    if( $('#elementcontainingfocus').inView() ) {
       $(function() {
                $("#elementcontainingfocus input").focus();
                    $("input[type=text]:focus").css({  
                    "box-shadow": "0 0 5px rgba(81, 203, 238, 1)",
                    "border": "1px solid rgba(81, 203, 238, 1)"
                    });
                });
    }

});
1
Dave Powell

Essayez cette solution jQuery:

$('#link').select();
0
Ripper

Cela a fonctionné pour moi

var focusWithoutScrolling = function(element) {
    var fixed = { "position": "fixed" };
    var posStatic = { "position": "static" };
    $(":root").css(fixed);
    $("body").css(fixed);
    $("html").css(fixed);
    $(element).focus();
    $(":root").css(posStatic);
    $("body").css(posStatic);
    $("html").css(posStatic);
}
0
Martin