当前位置：文江博客话题详情

页面部分回发后如何在 UpdatePanel 中保持焦点位置

发布于 2024-08-30 06:14:08 字数 109 浏览 4 评论 0原文

我在带有更新面板的页面中有四个控件。最初，鼠标焦点设置为第一个控件。当我将页面部分回发到服务器时，焦点会自动从我按下 Tab 键的控件中的最后一个焦点控件移动到第一个控件。有什么办法可以保持最后的焦点吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

弄潮 2024-09-06 06:14:08

查看在更新中恢复失去的焦点带有自动回发控件的面板：

解决方案背后的基本思想是保存控件的ID
在更新面板更新并设置输入之前具有输入焦点
更新面板更新后，焦点将返回到该控件。

我附带了以下 JavaScript，它可以恢复失去的焦点
更新面板。

var lastFocusedControlId = "";

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

函数appInit() {
    if (typeof(window.addEventListener) !== "未定义") {
        window.addEventListener("焦点", focusHandler, true);
    }
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}

函数 pageLoadingHandler(sender, args) {
    lastFocusedControlId = typeof(document.activeElement) === "未定义" 
        ？ "" : document.activeElement.id;
}

函数焦点控制（目标控制）{
    if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
        var focusTarget = targetControl;
        if (focusTarget && (typeof(focusTarget.contentEditable) !== "未定义")) {
            oldContentEditableSetting = focusTarget.contentEditable;
            focusTarget.contentEditable = false;
        }
        别的 {
            焦点目标=空；
        }
        targetControl.focus();
        如果（焦点目标）{
            focusTarget.contentEditable = oldContentEditableSetting;
        }
    }
    别的 {
        targetControl.focus();
    }
}

函数 pageLoadedHandler(sender, args) {
    if (typeof(lastFocusedControlId) !== "未定义" && lastFocusedControlId != "") {
        var newFocused = $get(lastFocusedControlId);
        如果（新聚焦）{
            focusControl(newFocused);
        }
    }
}

Sys.Application.add_init(appInit);

Take a look at Restoring Lost Focus in the Update Panel with Auto Post-Back Controls:

The basic idea behind the solution is to save the ID of the control
with input focus before the update panel is updated and set input
focus back to that control after the update panel is updated.

I come with the following JavaScript which restores the lost focus in
the update panel.

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

回复收藏 0 原文

转角预定愛 2024-09-06 06:14:08

我发现这更优雅：

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

I find this more elegant:

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

回复收藏 0 原文

~没有更多了~