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没有方法'焦点'”

我做错了什么？

更新：

我尝试过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 ：

我用这个玩了更多，并取得了进展（我认为）。现在我没有收到任何错误消息，但重点仍然不是TextBox。这是我目前的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 class控件中使用TextBox名称，如下所示：

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

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

3 个答案: