javascript - Jquery 将输入字段复制到 div 之外的另一个输入

Question

我有一些jquery，我一直在调试。我有一个搜索字段，当我在页面顶部的输入字段中输入文本时，我希望将第一个输入的值直接复制到 #search_visibleTest 输入。当我将两个输入放在一起时，代码可以完美运行。

我的问题: 当我在其自己的 div 中的第一个搜索输入中输入文本时，具有辅助字段的正确 id 的输入无法工作或填充。关于我做错了什么的任何见解。如果您需要更多信息，请告诉我。

<div class="head">
    <input class="form-input" id="search_visible" name="search_visible" placeholder="Search" autocomplete="off">
</div>

<div class="body">
    <form>
        <input class="form-input" id="search_visibleTest" name="search_visible" placeholder="Search" autocomplete="off">
    </form>
</div>

<script>
  $("#search_visible").keyup(function(){
      $("#search_visibleTest").val(this.value);
  });
</script>

该脚本仅适用于以下代码。我不确定问题是什么。我没有收到任何控制台错误。

<div class="head">
    <input class="form-input" id="search_visible" name="search_visible" placeholder="Search" autocomplete="off">
    <input class="form-input" id="search_visibleTest" name="search_visible" placeholder="Search" autocomplete="off">
</div>

Answer 1

你可以使用这样的东西。这会将具有数据镜像属性的输入上的任何更改镜像到具有数据镜像的任何其他输入。然后你可以绑定(bind)任意数量的。

$('[data-mirror]').on('change keyup paste',function(){
  $('[data-mirror]').val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-mirror><br/>
<input type="text" data-mirror><br/>
<div>
  <input type="text" data-mirror>
</div>