Comment maintenir la position de mise au point dans UpdatePanel après la page partielle retour

Question

J'ai quatre contrôles dans une page avec panneau de mise à jour. Initialement, le focus de la souris est réglé sur le premier contrôle. Lorsque je publie partiellement la page sur le serveur, la mise au point se déplace automatiquement vers le premier contrôle depuis le dernier contrôle ciblé à partir du contrôle sur lequel j'ai appuyé. Y a-t-il un moyen de maintenir le dernier foyer?

Answer 1

Jetez un oeil à Restoring Lost Focus in the Update Panel with Auto Post-Back Controls:

L'idée de base de la solution consiste à enregistrer l'ID du contrôle avec mise au point d'entrée avant le panneau de mise à jour est mis à jour et mettre en entrée mise au point arrière à ce contrôle après le panneau de mise à jour est mis à jour.

Je viens avec le JavaScript suivant qui restaure le focus perdu dans le panneau de mise à jour.

var lastFocusedControlId = ""; 

function focusHandler(e) { 
    document.activeElement = e.originalTarget; 
} 

function appInit() { 
    if (typeof(window.addEventListener) !== "undefined") { 
     window.addEventListener("focus", focusHandler, true); 
    } 
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler); 
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler); 
} 

function pageLoadingHandler(sender, args) { 
    lastFocusedControlId = typeof(document.activeElement) === "undefined" 
     ? "" : document.activeElement.id; 
} 

function focusControl(targetControl) { 
    if (Sys.Browser.agent === Sys.Browser.InternetExplorer) { 
     var focusTarget = targetControl; 
     if (focusTarget && (typeof(focusTarget.contentEditable) !== "undefined")) { 
      oldContentEditableSetting = focusTarget.contentEditable; 
      focusTarget.contentEditable = false; 
     } 
     else { 
      focusTarget = null; 
     } 
     targetControl.focus(); 
     if (focusTarget) { 
      focusTarget.contentEditable = oldContentEditableSetting; 
     } 
    } 
    else { 
     targetControl.focus(); 
    } 
} 

function pageLoadedHandler(sender, args) { 
    if (typeof(lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") { 
     var newFocused = $get(lastFocusedControlId); 
     if (newFocused) { 
      focusControl(newFocused); 
     } 
    } 
} 

Sys.Application.add_init(appInit); 

Answer 2

Je trouve cela plus élégant:

(function(){ 
    var focusElement; 
    function restoreFocus(){ 
     if(focusElement){ 
      if(focusElement.id){ 
       $('#'+focusElement.id).focus(); 
      } else { 
       $(focusElement).focus(); 
      } 
     } 
    } 

    $(document).ready(function() { 
     $(document).on('focusin', function(objectData){ 
      focusElement = objectData.currentTarget.activeElement; 
     }); 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(restoreFocus); 
    }); 
})();