使用ASP.NET AJAX控件工具包设置焦点

时间:2020-03-05 18:47:22  来源:igfitidea点击:

我正在使用ASP.NET AJAX控件工具包中的AutoComplete控件,但是在将焦点设置到分配的文本框时遇到了无法填充AutoComplete的问题。

我尝试在Page_Load,Page_PreRender和Page_Init事件中设置焦点,并且焦点设置正确,但是"自动完成"功能无效。如果我没有设置焦点,那么一切都会很好,但是我想设置它,以便用户没有额外的点击。

我需要在一个特殊的地方设置焦点或者进行此工作吗?谢谢。

解决方案

回答

我们有完全相同的问题。我们要做的是在页面底部编写一个脚本,该脚本会快速模糊然后重新聚焦到文本框。我们可以在这里查看(非常hacky)解决方案:http://www.drive.com.au

文本框ID为MainSearchBox_SearchTextBox。看一下第586行,我们会看到我在哪里连接所有事件(我实际上是在使用原型。

基本上,在文本框的焦点事件上,我将名为textBoxHasFocus的全局变量设置为true,在模糊事件上,将其设置为false。在页面的load事件中,我将此脚本称为:

if (textBoxHasFocus) {
    $get("MainSearchBox_SearchTextBox").blur();
    $get("MainSearchBox_SearchTextBox").focus();
}

这将重置文本框。这确实很狡猾,但这是我能找到的唯一解决方案

回答

我们如何设置焦点?我没有尝试过我们建议的特定方案,但是下面是我将重点放在控件上的方法:

Public Sub SetFocus(ByVal ctrl As Control)
    Dim sb As New System.Text.StringBuilder
    Dim p As Control
    p = ctrl.Parent
    While (Not (p.GetType() Is GetType(System.Web.UI.HtmlControls.HtmlForm)))
        p = p.Parent
    End While
    With sb
        .Append("<script language='JavaScript'>")
        .Append("function SetFocus()")
        .Append("{")
        .Append("document.")
        .Append(p.ClientID)
        .Append("['")
        .Append(ctrl.UniqueID)
        .Append("'].focus();")
        .Append("}")
        .Append("window.onload = SetFocus;")
        .Append("")
        .Append("</script")
        .Append(">")
    End With
    ctrl.Page.RegisterClientScriptBlock("SetFocus", sb.ToString())
End Sub

因此,我不确定我们使用的是哪种方法,但是如果它与我的方法不同,请尝试一下,看看我们是否仍然有问题。

回答

我通常要做的是注册一个客户端脚本,以从我的codebehind方法中运行以下setFocusTimeout方法。当它运行时,它会等待一些时间,然后调用实际设置焦点的方法(setFocus)。骇人听闻,但看来我们必须走这样一条路,才能阻止AJAX抢走注意力。

function setFocusTimeout(controlID) {
    focusControlID = controlID;
    setTimeout("setFocus(focusControlID)", 100);
}

function setFocus() {
    document.getElementById(focusControlID).focus();
}

回答

我从Glenn Slaven和Kris / Alex找到了答案,通过将重点放在添加了AutoCompleteExtender的ASP.NET TextBox控件上,可以使我更接近解决我的特定问题的方法。 document.getElementById(focusControlID).focus()不断抛出javascript错误,这暗示了document.getElementById返回空对象。 focusControlID变量为TextBox控件返回了正确的运行时ClientID值。但是无论出于什么原因,document.getElementById函数都不喜欢它。

我的解决方案是将jQuery混合使用,因为我已经在使用它来绘制具有焦点的任何控件的背景,再加上在窗体中使用Enter键来制表,而不是触发回发。

我的setFocus函数最终看起来像这样:

function setFocus(focusControlID) {
    $('#' + focusControlID).blur();
    $('#' + focusControlID).focus();
}

这消除了javascript运行时错误,将焦点放在所需的TextBox控件上,并将光标也放置在控件内。在没有先模糊然后聚焦的情况下,控件将被高亮显示,就好像它具有焦点一样,但是光标尚未位于控件中。用户仍然必须在控件内部单击以开始编辑,这可能是UX的烦恼。

我还必须将超时时间从100增加到300。里程可能会有所不同...

我同意所有人的观点,这是一个hack。但是从最终用户的角度来看,他们看不到此代码。对于他们来说,解决方法是如果他们必须手动单击控件内部,而不是仅仅自动将其放置在控件内部并键入前几个字母以触发自动查找功能。因此,向所有提供骇客的人致以崇高的敬意。

我希望这对其他人有帮助。