为什么我不能在 Javascript 中或从代码隐藏中将焦点设置为 ASP.Net TextBox 控件

Why can't I set the focus to an ASP.Net TextBox control in Javascript or from code behind?

本文关键字:焦点 设置 ASP 控件 TextBox Net 代码 不能 Javascript 为什么 隐藏      更新时间:2023-09-26

我正在尝试将焦点设置为 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 选择器,但它不起作用。现在我收到一个不同的错误:

捕获的引用错误:未定义类名

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

以及为文本框生成的 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 响应),没有错误,但文本框仍然没有得到焦点。

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

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

这应该可以解决问题。

您缺少 ID 选择器的#

要么这样做:

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

或者改用 ASP.NET TextBox控件中的class名称,如下所示:

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

现在你的选择器变成这样:

var ctrl = $('.TheTextBox');

注意:使用类选择器与 ID 选择器极大地简化了选择器语法,并删除了您正在使用的粗糙的嵌入式代码块 (<%= ... %>) 语法。虽然它不如 ID 选择器快,但在我看来,更简单、更易于维护的代码的收益绝对是值得的。

更新:

将整个选择器值包装在单引号中,如下所示:

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

我终于想出了一个方法来做到这一点!我将 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)