Question

我在一个标签中有一个输入字段，在另一个标签中有一个同名的输入字段。如何将一个选项卡中的输入值重复到另一个选项卡？（我正在使用Bootstrap）

要重复输入的值，我正在使用下面的代码，但我不知道如何将值从活动标签加载到另一个。

点击演示： DEMO

代码：

$('input, textarea').keyup(function() {
    $('[name="' + $(this).attr('name') + '"]').val($(this).val());
});

我有三个标签：

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home"><br>
        <label for="fi">First input</label>
        <input class="form-control" type="text" id='fi' name="first_input">

        <label for="si">Second input</label>
        <input class="form-control" type="text" id='si' name="second_input">
    </div>
    <div role="tabpanel" class="tab-pane" id="profile"><br>
        <label for="fi">First input</label>
        <input class="form-control" type="text" id='fi' name="first_input">

        <label for="si">Second input</label>
        <input class="form-control" type="text" id='si' name="second_input">
    </div>
    <div role="tabpanel" class="tab-pane" id="messages"><br>
        <label for="fi">First input</label>
        <input class="form-control" type="text" id='fi' name="first_input">

        <label for="si">Second input</label>
        <input class="form-control" type="text" id='si' name="second_input">
    </div>
  </div>

</div>

和js for show tab by url，例如index.html #profile：

$(document).ready(function() {
    var hash = window.location.hash;
    $('.nav-tabs a[href="' + hash + '"]').tab('show');
});

Answer 1

问题是您多次使用相同的ID（si和fi）并且它们应该是唯一的。您必须将ID值更改为唯一名称或使用类，因为可以多次使用相同的类名。

在这种情况下，我会使用不同的ID，因为你有一个label for标签而for引用了一个ID元素而不是一个类。（source）

修复了使用不同ID的HTML代码（fiddle）：

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home"><br>
        <label for="fi_home">First input</label>
        <input class="form-control" type="text" id='fi_home' name="first_input">

        <label for="si_home">Second input</label>
        <input class="form-control" type="text" id='si_home' name="second_input">
    </div>
    <div role="tabpanel" class="tab-pane" id="profile"><br>
        <label for="fi_profile">First input</label>
        <input class="form-control" type="text" id='fi_profile' name="first_input">

        <label for="si_profile">Second input</label>
        <input class="form-control" type="text" id='si_profile' name="second_input">
    </div>
    <div role="tabpanel" class="tab-pane" id="messages"><br>
        <label for="fi_messages">First input</label>
        <input class="form-control" type="text" id='fi_messages' name="first_input">

        <label for="si_messages">Second input</label>
        <input class="form-control" type="text" id='si_messages' name="second_input">
    </div>
  </div>
</div>

将活动选项卡中的输入复制到另一个具有相同名称的选项卡的输入 - Bootstrap

1 个答案: