在部分頁面回發之后，在UpdatePanel中選擇ASP.NET TextBox的內容

Question

我在選擇IE 8的UpdatePanel中的TextBox中的文本時遇到問題。請考慮一個非常簡單的頁面，其中包含一個UpdatePanel。 在該UpdatePanel中，有兩個Web控件：

1. 具有三個靜態定義的列表項的DropDownList，其AutoPostBack屬性設置為True，以及
2. TextBox Web控件

DropDownList的SelectedIndexChanged事件具有服務器端事件處理程序，在該事件處理程序中有兩行代碼：

TextBox1.Text = "Whatever";
ScriptManager.RegisterStartupScript(this, 
                      this.GetType(), 
                      "Select-" + TextBox1.ClientID,
                      string.Format("document.getElementById('{0}').select();", 
                                                       TextBox1.ClientID), 
                      true);

這個想法是，每當用戶從DropDownList中選擇項目時，都會有部分頁面回發，這時將設置和選擇TextBox的Text屬性（通過注入的JavaScript）。 不幸的是，這不能按原樣工作。 （我也嘗試過將腳本放到pageLoad函數中，但是沒有運氣，如： ScriptManager.RegisterStartupScript（...，“ function pageLoad（）{... my script ...}”“）； ）發生的是代碼會運行，但是頁面上的其他內容會集中在部分頁面回發的結束上，從而導致未選擇TextBox的文本。

我可以使用JavaScript的setTimeout來“修復”此問題，以延遲執行我的JavaScript代碼。 例如，如果我將發出的JavaScript更新為以下代碼：

setTimeout("document.getElementById('{0}').select();", 111);

有用。” 我將作品用引號引起來，因為它適用於計算機上的此簡單頁面。 在速度較慢的計算機上的更復雜的頁面上，通過部分頁面回發在客戶端和服務器之間傳遞了更多的標記，我必須將超時延長到一秒鍾以上才能使其正常工作。 我希望有一個更簡單的方法來實現這一目標。 與其說“延遲X毫秒”，不如說“當您不打算竊取焦點時運行此命令”。

令人困惑的是.Focus（）方法的效果很好。 也就是說，如果我取消JavaScript並將其替換為對TextBox1.Focus（）的調用； 然后文本框將獲得焦點（盡管未選擇文本）。 我檢查了MicrosoftAjaxWebForms.js的內容，發現焦點已在運行已注冊的腳本之后設置，但是我的JavaScript技能不足以解碼此處發生的一切以及為什么在文本之間未選擇所選文本的原因。時間被選中，部分頁面回發結束。 我還嘗試使用Firebug的JavaScript調試器，並看到當我的腳本運行時，選擇了TextBox的文本。 當我繼續瀏覽時，文本仍然保持選中狀態，但是在退出腳本的最后一行（顯然）之后，突然之間所有內容都未被選擇。

有任何想法嗎？ 我正在拔頭發。

提前致謝...

編輯：經過進一步測試，我注意到此行為僅在IE 8中發生。在Firefox，Chrome或Safari中進行測試時不會發生。

Answer 1

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
        function(sender, args) {
            document.getElementById('TextBox1.ClientID').focus();
        });

UpdatePanel完成請求后，將調用此方法。 您還需要從DOM中重新拉動元素，因為在調用更新面板之前對它的任何引用都不會在更新面板完成后指向該字段。

Answer 2

我沒有使用UpdatePanel太多，因此對於這在您的特定情況下是否有用沒有多少了解，但是使用jQuery document.ready包裝器成功解決了焦點難題。 如果您尚未使用jQuery，則可能值得進行測試-嘗試更改RegisterStartupScript以輸出以下內容：

$(document).ready(function() {
    document.getElementById('TextBox1.ClientID').select();
});

當然，可能會有非jQuery的方式對此進行排序，但是這種方法通常使它變得簡單。