Focus on First asp:textbox in each bootstrap tab when clicking tab link

Question

i am new to development and started developing a simple asp.net application. I am using bootstrap tabs having some asp labels and textboxes in each. I want focus on first textbox in the tab content when click on that tab. I searched various answers but all are for input fields(exp: input type="text"). can't find any for asp textbox. Any help will be appreciated. Thanks

Take a look at this answer: https://stackoverflow.com/a/17500718/877223 — Aleksey Shevchenko, Jul 05 '17 at 07:11
Possible duplicate of [JavaScript set focus to HTML form element](https://stackoverflow.com/questions/17500704/javascript-set-focus-to-html-form-element) — Bob Swager, Jul 05 '17 at 07:12
#dork have edited my question i am talking about the input type text fields. Anyway thanks for considering — Preet, Jul 05 '17 at 07:12
#Aleksey Shevchenko #Bob Swager thanks for suggestion but i want focus on first textbox in each tab content not on whole page — Preet, Jul 05 '17 at 07:14
You can make use of jQuery to put focus on first textbox div section that shows up after clicking tabs. Bootstrap tabs are nothing but combination on HTML element UL and LI. You can easily put jQuery click event on these LI and identify which LI tab has been clicked and use `$("#<% Textbox.ClientID%>").focus();` (if its a server control) or `$("#textbox").focus();` (if an HTML control) to put focus on corresponding textbox. Try it yourself and we will be there to assist you if you get stuck somewhere. — Suprabhat Biswal, Jul 05 '17 at 07:31

dork · Accepted Answer · 2017-07-06T06:45:37.607

1

ASP.NET TextBoxes are HTML textboxes. By default, the ClientIDMode of controls are Predictable. This means the rendered HTML's id is auto-generated.

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

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

What you can do is add ClientIDMode="Static" to the TextBox. This will make the rendered (HTML) id of the input the same as the ID you passed to the TextBox.

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

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

You can then target that via JavaScript using the answers you've searched for.

EDIT:

If you don't want to target the TextBoxes via id, you can probably just use CSS classes to tag them like:

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

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

edited Jul 06 '17 at 06:45

answered Jul 05 '17 at 07:15

dork

4,396
2
28
56

Thanks #dork will try this. but in solutions they dont make use of id they simply use input like: $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = e.target.attributes.href.value; $(target +' input').focus(); }) – Preet Jul 05 '17 at 07:19
@Preet, then you just have to change `input` in `$(target + ' input')` to the correct textbox. – dork Jul 05 '17 at 07:31
@Preet, edited my answer to include sample usage with Bootstrap's `shown.bs.tab` event. – dork Jul 05 '17 at 07:44

score 0 · Answer 2 · answered Jul 11 '17 at 01:21

There is another way to achieve this though its longer but worked for me. In this solution we can search which navbar tab we are currently in and then set focus to this tabs contents first text box by using its id. 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(); 
            }
         }
      }
   }

Focus on First asp:textbox in each bootstrap tab when clicking tab link

2 Answers2