单击选项卡链接时，关注每个引导选项卡中的第一个 asp:textbox答案

【问题标题】：Focus on First asp:textbox in each bootstrap tab when clicking tab link单击选项卡链接时，关注每个引导选项卡中的第一个 asp:textbox
【发布时间】：2017-07-11 09:21:28
【问题描述】：

我是开发新手，开始开发一个简单的 asp.net 应用程序。我正在使用引导选项卡，每个选项卡都有一些 asp 标签和文本框。单击该选项卡时，我想专注于选项卡内容中的第一个文本框。我搜索了各种答案，但都是输入字段（exp：输入类型=“文本”）。找不到任何用于 asp 的文本框。任何帮助将不胜感激。谢谢

【问题讨论】：

ASP.NET texboxes 是 HTML 输入字段。
看看这个答案：stackoverflow.com/a/17500718/877223
JavaScript set focus to HTML form element的可能重复
#dork 编辑了我的问题，我正在谈论输入类型的文本字段。无论如何感谢您的考虑
#Aleksey Shevchenko #Bob Swager 感谢您的建议，但我想关注每个标签内容中的第一个文本框而不是整个页面

标签： javascript c# asp.net

【解决方案1】：

ASP.NET 文本框是 HTML 文本框。默认情况下，控件的ClientIDMode 是Predictable。这意味着呈现的 HTML 的 id 是自动生成的。

// ASP.NET TextBox
<asp:TextBox ID="TextBox1"/>

// Rendered HTML
<input type="text" id="ContentPlaceHolder1_TextBox1_1"/>

您可以将ClientIDMode="Static" 添加到文本框。这将使 input 的呈现 (HTML) id 与您传递给 TextBox 的 ID 相同。

// ASP.NET TextBox
<asp:TextBox ID="TextBox1" ClientIDMode="Static"/>

// Rendered HTML
<input type="text" id="TextBox1"/>

然后，您可以通过 JavaScript 使用您搜索的答案来定位它。

编辑：

如果你不想通过 id 来定位 TextBox，你可以只使用 CSS 类来标记它们：

<asp:TextBox ID="TextBox1" CssClass="default-focus" />

然后用 jQuery：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = event.target.attributes.href.value;
  var $textbox = $(target + ' .default-focus');

  $textbox.focus();
});

【讨论】：

谢谢#dork 会试试这个。但在解决方案中，他们不使用 id，他们只是使用如下输入： $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = e .target.attributes.href.value; $(target +' input').focus(); })
@Preet，那么您只需将$(target + ' input') 中的input 更改为正确的文本框。
@Preet，编辑了我的答案以包含 Bootstrap 的 shown.bs.tab 事件的示例用法。

【解决方案2】：

还有另一种方法可以实现这一点，虽然它更长但对我有用。在此解决方案中，我们可以搜索我们当前所在的导航栏选项卡，然后使用其 ID 将焦点设置到此选项卡内容的第一个文本框。代码：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
{
    var target = e.target.attributes.href.value;
    if (target == "#tab1") 
     {
       $("#<%=txttab1.ClientID%>").focus(); 
     }
    else 
     {
        if (target == "#tab2") 
         {
           $("#<%=txttab2.ClientID%>").focus(); 
         }
        else 
         {
            if (target == "#tab3") 
            {
               $("#<%=txttab3.ClientID%>").focus(); 
            }
         }
      }
   }

【讨论】：