为什么不能将焦点设置为Javascript或后面的代码中的ASP.Net TextBox控件？

Question

我正在尝试将焦点设置为ASP.Net应用程序（C＃）中的TextBox控件（位于UpdatePanel内部）。 我在后面的代码中尝试了以下方法：

tbxName.Focus();
Page.SetFocus(tbxName);
tsmManageTables.SetFocus(tbxName);

这些都不起作用，所以我去了Javascript。 这是我的Javascript函数：

function SetControlFocus(ctrlID) {
  var ctrl = document.getElementById(ctrlID);
  ctrl.focus();
}

这是调用它的代码背后的方法：

private void SetControlFocus(Control ctrl)
{
  StringBuilder focus = new StringBuilder();
  focus.AppendLine("<script type='text/javascript'>");
  focus.AppendFormat("  SetControlFocus('{0}');" + System.Environment.NewLine, ctrl.ClientID);
  focus.AppendLine("</script>");
  ClientScript.RegisterStartupScript(this.GetType(), "setControlFocus", focus.ToString(), false);
}

并致电：

SetControlFocus(tbxName);

我也尝试过Javascript：

(function($) {
  SetControlFocus = function(ctrlID) {
    var ctrl = $('<%= ' + ctrlID + ' %>');
    ctrl.focus();
  };
})(jQuery);

无论使用哪个版本的Javascript函数，我都会收到错误消息

“对象ctl00_MainContent_tbxName没有方法'focus'”

我究竟做错了什么？

更新 ：

我尝试了Karl的建议，即在丑陋的<%= =>上使用类选择器而不是ID选择器，但这没有用。 现在我遇到了另一个错误：

未捕获的ReferenceError：未定义className

使用Javascript：

(function($) {
  SetControlFocus = function(ctrlClass) {
    var ctrl = $('.' + ctrlClass);
    ctrl.focus();
  };
})(jQuery);

标记：

<asp:TextBox ID="tbxName" runat="server" CssClass="className"></asp:TextBox>

调用方法：

private void SetControlFocus(Control ctrl)
{
  StringBuilder focus = new StringBuilder();
  focus.AppendLine("<script type='text/javascript'>");
  focus.AppendFormat("  SetControlFocus({0});" + System.Environment.NewLine, ctrl.CssClass);
  focus.AppendLine("</script>");
  ClientScript.RegisterStartupScript(this.GetType(), "setControlFocus", focus.ToString(), false);
}

通话（C＃）：

SetControlFocus(tbxName);

以及为TextBox生成的HTML：

<input name="ctl00$MainContent$tbxName" type="text" id="ctl00_MainContent_tbxName" class="className" />

更新2 ：

我对此进行了更多尝试并取得了进展（我认为）。 现在我没有收到任何错误消息，但是重点仍然不在文本框上。 这是我当前的jQuery函数：

(function($) {
  SetControlFocus = function(ctrl) {
    //give the control focus
    alert(ctrl);
    ctrl.focus();
  };
})(jQuery);

这是我在其中调用的C＃方法：

private void SetControlFocus(TextBox ctrl)
{
  StringBuilder focus = new StringBuilder();
  focus.AppendLine("<script type='text/javascript'>");
  focus.AppendFormat("  SetControlFocus({0});" + System.Environment.NewLine, ctrl.ClientID);
  focus.AppendLine("</script>");
  ClientScript.RegisterStartupScript(this.GetType(), "setControlFocus", focus.ToString(), false);
} //end method SetControlFocus

注意，我正在将控件的ClientID传递给Javascript函数。 奇怪的是，Javascript正在获取ClientID并实际上“捕获”了控制对象，而不是包含ClientID的字符串。 警报正在运行，它在警报中显示了[object HTMLInputElement] 。 有小费吗？

更新3 ：

我已经修改了Javascript函数：

(function($) {
  SetControlFocus = function(ctrlSelector) {
    alert(ctrlSelector);
    $(ctrlSelector).focus();
  };
})(jQuery);

和调用方法：

private void SetControlFocus(TextBox ctrl)
{
  StringBuilder focus = new StringBuilder();
  focus.AppendLine("<script type='text/javascript'>");
  focus.AppendFormat("  SetControlFocus('{0}');" + System.Environment.NewLine, "#" + ctrl.ClientID);
  focus.AppendLine("</script>");
  ClientScript.RegisterStartupScript(this.GetType(), "setControlFocus", focus.ToString(), false);
}

（请注意，在参数- '{0}'周围添加了单引号）。

现在，我得到了正确的选择器（警报以#ctl00_MainContent_txtName响应），没有错误，但是TextBox 仍然没有得到焦点。

Answer 1

您的第二个javascript缺少表示ID选择的哈希符号。

(function($) {
  SetControlFocus = function(ctrlID) {
    var ctrl = $('#<%= ' + ctrlID + ' %>');
    ctrl.focus();
  };
})(jQuery);

这应该可以解决问题。

Answer 2

您缺少ID选择器的# 。

要么这样做：

var ctrl = $('#<%= ' + ctrlID + ' %>');

或改为在ASP.NET TextBox控件中使用class名，如下所示：

<asp:TextBox id="TextBox1" runat="server" CssClass="TheTextBox" />

现在您的选择器变为：

var ctrl = $('.TheTextBox');

注意：使用类选择器和ID选择器可以大大简化选择器语法，并删除您使用的粗糙嵌入代码块（ <%= ... %> ）语法。 尽管它不像ID选择器那么快，但在我看来绝对值得拥有更简单，更可维护的代码。

更新：

将整个选择器值用单引号引起来，如下所示：

var ctrl = $("'." + ctrlClass + "'");

Answer 3

我终于想出了一种方法来完成这项工作！ 我将jQuery SetControlFocus()调用移到了我要从后面的代码中调用的另一个jQuery函数中。 方法背后的代码调用MessageDialog() ，现在看起来像这样：

(function($) {
  MessageDialog = function(title, dialogText, focusID) {
    //add the dialog div to the page
    $('body').append(String.Format("<div id='messageDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
    //create the dialog
    $('#messageDialog').dialog({
      modal: true,
      resizable: false,
      draggable: false,
      close: function(event, ui) { $('body').find('#messageDialog').remove(); },
      buttons:
        [{
          text: 'OK',
          click: function() {
          $(this).dialog('close');
          //Set focus to the control object in argument #3 (if provided)
            if (focusID.length > 0) {
              SetControlFocus(focusID);
            }
          }
        }]
      });
    };
})(jQuery);

SetControlFocus()仍然是：

(function($) {
  SetControlFocus = function(ctrlSelector) {
    $(ctrlSelector).focus();
  };
})(jQuery);

我在C＃中的调用方法（这是我已经拥有的方法的重载）是：

private void DisplayMessageDialog(string msgTitle, string msgText, string ctrlID)
{
  StringBuilder msg = new StringBuilder();
  msg.AppendLine("<script type='text/javascript'>");
  msg.AppendFormat("  MessageDialog('{0}', '{1}', '{2}');" +
    System.Environment.NewLine, msgTitle, msgText, "#" + ctrlID);
  msg.AppendLine("</script>");
  ClientScript.RegisterStartupScript(this.GetType(), "messageDialog", msg.ToString(), false);
} //end method DisplayMessageDialog (overload #2 - specifies a control to get focus
  //after the dialog is dismissed)