Question

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

Answer 1

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

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

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

您可以做的是将ClientIDMode="Static"添加到TextBox。这将使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();
});

Answer 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(); 
            }
         }
      }
   }

单击选项卡链接时，请关注每个引导选项卡中的第一个asp：文本框

2 个答案: