twitter-bootstrap 在选项卡更改时将焦点设置到 Bootstrap TabContent 中的输入

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24491779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:02:18  来源:igfitidea点击:

Set focus to an input within a Bootstrap TabContent on tab change

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

提问by Rafael A. M. S.

I need to set focus to "inputOne" input when tabOne is selected, and set focus to "inputTwo" when tabTwo is selected.

我需要在选择 tabOne 时将焦点设置为“inputOne”输入,并在选择 tabTwo 时将焦点设置为“inputTwo”。

<ul class="nav nav-tabs">
     <li class="active"><a href="#tabOne" data-toggle="tab">Tab One</a></li>
     <li class=""><a href="#tabTwo" data-toggle="tab">Tab Two</a></li> 
</ul>

<div id="tabContent" class="tab-content">
     <div class="tab-pane fade" id="tabOne">
           <input type="text" id="inputOne" />
     </div>
     <div class="tab-pane fade" id="tabTwo">
           <input type="text" id="inputTwo" />
     </div>
</div>

回答by BENARD Patrick

Look at this bootply

看看这个引导

JS:

JS

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

You can find doc here:

你可以在这里找到文档:

回答by nthall

You can rely on the bootstrap "shown" event for the tabs to handle this:

您可以依靠选项卡的引导程序“显示”事件来处理此问题:

$(".nav-tabs a").on("shown.bs.tab", function(event) {
    $(event.target.href.value + " input").focus();
});

more info on the tab event: http://getbootstrap.com/javascript/#tabs

有关选项卡事件的更多信息:http: //getbootstrap.com/javascript/#tabs

回答by stacky

You can write the following jquery code :

您可以编写以下 jquery 代码:

$( "#tabOne" ).click(function() {
  $( "#inputOne" ).focusin()        
});

Do the same thing for tabTwoalso.

tabTwo也做同样的事情。