Question

我有两个按钮，弹出相同的Modal窗口，但在Modal窗口中显示一个不同的选项卡。在每个选项卡中都有一个包含许多输入的表单。我的问题是在Modal中的两个选项卡中的任一个中获取第一个表单输入上的Focus()。

这是我到目前为止（我遗漏了一些不必要的代码）：

CoffeeScript的：

# Triggers when a modal tab is shown
$ ->
  $('a[data-toggle="tab"]').bind 'shown', (event) =>
    $(this).closest('input').focus()

    # Further info:
    # event.target = activated tab. alert event.target returns 'http://localhost:3000/#tab-1'
    # event.relatedTarget = previous tab. alert event.target returns 'http://localhost:3000/#tab-2'

HTML：

<a href="#modal" id="tab-1-btn">Tab 1 Button</a>
<a href="#modal" id="tab-2-btn">Tab 2 Button</a>

<div class="modal" id="myModal">

  <div class="modal-body">

    <ul class="nav nav-tabs" id="tabs">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#profile">Profile</a></li>
    </ul>

    <div class="tab-content" id="tabs">

      <div id="tab-1" class="tab-pane">
        <form id="tab-1-form">
          <input name="tab-1-input" />
        </form>
      </div>

      <div id="tab-2" class="tab-pane">
        <form id="tab-2-form">
          <input name="tab-2-input" />
        </form>
      </div>

    </div>

  </div>
</div>

参考文献：

我也对jQuery或Javascript解决方案持开放态度，如有必要，我会自己将其转换为CoffeeScript。

非常感谢任何帮助，谢谢。

Answer 1

这是你所描述的一个有趣的问题;这是尝试处理这个问题的一次尝试，它似乎正在起作用，至少在Chrome中是这样。

http://jsfiddle.net/CqACQ/3/

<强> HTML

<a class="btn" id="home-btn" data-toggle="modal" href="#myModal" >Tab 1 Button</a>
<a class="btn" id="profile-btn" data-toggle="modal" href="#myModal" >Tab 2 Button</a>

    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>A yodel for a Modal</h3>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs" id="main-tabs">
          <li class="li-home"><a href="#home" data-toggle="tab">Home</a></li>
          <li class="li-profile"><a href="#profile" data-toggle="tab">Profile</a></li>
        </ul>

        <div class="tab-content" id="tabs">

          <div id="home" class="tab-pane">
            <form id="tab-1-form">
                <label>Home sweet home:</label>
              <input name="home-input" id="home-input" type="text" class="input-medium" />
            </form>
          </div>

          <div id="profile" class="tab-pane">
            <form id="tab-2-form">
                <label>Profile: who are you?:</label>
              <input name="profile-input" id="profile-input" type="text" class="input-medium" />
            </form>
          </div>

        </div>

      </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
      </div>
    </div>

Javascript （利用Twitter bootstrap＆＃39; s事件和jQuery）

$('#myModal').on('show', function () {
// http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event-using-jquery    
    // are we working with "home" or with "profile"? 
    var theButtonCaller = event.target.id; 
        theButtonCaller = theButtonCaller.replace("-btn", ""); 

    $(".tab-pane, #main-tabs li").removeClass("active"); 
    $("#" + theButtonCaller).addClass("active");
    $("#main-tabs li.li-" + theButtonCaller).addClass("active"); 
});

$('#myModal').on('shown', function () {
    var theButtonCaller = event.target.id; 
        theButtonCaller = theButtonCaller.replace("-btn", ""); 
    $("#" + theButtonCaller + "-input").focus(); 
});

$('a[data-toggle="tab"]').on('shown', function (e) {
  // console.log( e.target ); // activated tab
    var inputToFocus = $(e.target).attr("href");
        inputToFocus = inputToFocus.replace("#", "");
        $("#" + inputToFocus + "-input").focus();
});

Answer 2

以下是我最终的CoffeeScript解决方案，感谢上面的帮助mg1075：

# Global variable to store tab info
inputTarget = ""

# Toggle login & sign up forms and focus cursor to top input on each
$ ->
  $('#tab-1-btn').click ->
    $('#tabs a[href="#tab-1"]').tab('show')
    inputTarget = "input#tab-1-input"

$ ->
  $('#tab-2-btn').click ->
    $('#tabs a[href="#tab-2"]').tab('show')
    inputTarget = "input#tab-2-input"

# Focus on top input when tab changed
$ ->
  $('a[data-toggle="tab"]').bind 'shown', (event) =>
    currentTabClass = event.target.className + "input" # = tab-1-input
    $("input#" + currentTabInputID).focus()

# Focus on top input when modal is shown
$ ->
  $('#myModal').bind 'shown', (event) =>
    $(inputTarget).focus()

Focus（）首先在当前模态选项卡中输入

2 个答案: