Focus auf First Asp: Textfeld in jedem Bootstrap Registerkarte beim Klicken auf Registerkarte Link

Question

Ich bin neu in der Entwicklung und begann mit der Entwicklung einer einfachen asp.net-Anwendung. Ich verwende Bootstrap-Registerkarten mit einigen Asp-Etiketten und Textfeldern in jedem. Ich möchte die erste Textbox im Tab-Inhalt fokussieren, wenn ich auf diesen Tab klicke. Ich habe verschiedene Antworten gesucht, aber alle sind für Eingabefelder (exp: input type = "text"). kann keine ASP-Textbox finden. Jede Hilfe wird geschätzt. Danke

Answer 1

ASP.NET TextBoxes sind HTML Textfelder. Standardmäßig ist die ClientIDMode der Steuerelemente Predictable. Dies bedeutet, dass die ID des gerenderten HTML automatisch generiert wird.

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

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

Was Sie tun können, ist ClientIDMode="Static" zu dem Text hinzuzufügen. Dadurch wird die gerenderte (HTML) ID der input die gleiche wie die ID, die Sie an die TextBox übergeben.

Sie können dies dann über JavaScript mit den Antworten, die Sie gesucht haben, ausrichten.

EDIT:

Wenn Sie die Textfelder über id nicht ausrichten möchten, können Sie wahrscheinlich nur CSS-Klassen verwenden, um sie mögen Tag:

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

dann mit 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

Es gibt einen anderen Weg, dies zu erreichen, obwohl es länger ist, aber für mich gearbeitet hat. In dieser Lösung können wir suchen, welche Navbar-Registerkarte wir gerade sind und dann den Fokus auf dieses Tabs-Inhalt-Textfeld setzen, indem wir seine ID verwenden. Code:

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