javascript - 关注第一个asp :textbox in each bootstrap tab when clicking tab link

Question

我是开发新手，开始开发一个简单的 ASP.NET 应用程序。我正在使用引导选项卡，每个选项卡中都有一些 asp 标签和文本框。单击该选项卡时，我希望重点关注选项卡内容中的第一个文本框。我搜索了各种答案，但都是针对输入字段的(例如:输入类型=“文本”)。找不到任何 asp 文本框。任何帮助将不胜感激。 谢谢

Answer 1

ASP.NET 文本框是 HTML 文本框。默认情况下，ClientIDMode控制是可预测的。这意味着渲染的 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 定位文本框，您可以只使用 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();
});