Jquery将输入域复制到div外的另一个输入 [英] Jquery Copy input field to another input outside div

问题描述

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

我的问题：
当我在第一个搜索输入中输入文本时，输入正确的辅助字段的ID不工作或填充。任何关于我在做什么错误的见解。

 < div class =head>如果您需要更多信息，请告知我们。 
< input class =form-inputid =search_visiblename =search_visibleplaceholder =Searchautocomplete =off> 
< / div> 
 
< div class =body> 
< form> 
< input class =form-inputid =search_visibleTestname =search_visibleplaceholder =Searchautocomplete =off> 
< / form> 
< / div> 
 
< script> 
 $（＃search_visible）。keyup（function（）{
 $（＃search_visibleTest）.val（this.value）; 
}）; 
< / script> 
  

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

 < div class =head> 
< input class =form-inputid =search_visiblename =search_visibleplaceholder =Searchautocomplete =off> 
< input class =form-inputid =search_visibleTestname =search_visibleplaceholder =Searchautocomplete =off> 
< / div> 
  

解决方案

你可以使用类似这样的东西。这将把具有data-mirror属性的输入的任何更改镜像到具有data-mirror的任何其他输入。然后你可以绑定尽可能多的数据。

$（'[data （'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 =textdata-mirror>< br />< input type =textdata-mirror>< br / >< DIV> < input type =textdata-mirror>< / div>

I have some jquery I have been working to debug. I have a search field that when I enter the text into the input field at the top of the page, I am expecting the value of the first input to be copied directly over to the #search_visibleTest input. The code works perfectly when I have the two inputs together.

My Issue: When I enter the text in the first search input in its own div, the input with the correct id of the secondary field is not working or populating. Any insights on what I am doing wrong. Let me know if you need more information.

<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>

The script does work with the code below only. I am not sure what the issue is. I am not getting any console errors.

<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>

解决方案

You can use something like this. This will mirror any change on an input with the data-mirror attribute to any other input with data-mirror. Then you can bind as many as you like.

$('[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>

这篇关于Jquery将输入域复制到div外的另一个输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！