Question

见下面的代码。我一次创建2个文本字段。现在，我如何在一个文本字段上键入并使另一个双文本字段同时具有相同的值？

<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
<script>
$(document).ready(function() {
    var tfCont = 0;
    var InputsWrapper = $("#InputsWrapper");
    var x = InputsWrapper.length; 
    var namefield = $("#tfButton");

    $(namefield).click(function() {
        tfCont++;
        $(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..."/>' + '<br>' + '</div>' + '</div>');

         $(OuterWrapper).append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '">' + '</div>');
        x++;
        return false;
    });
});
</script>

Answer 1

我创造了一个小提琴，我认为你做了什么：http://jsfiddle.net/3h1h5j7y/

这是代码。 HTML

<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>

的JavaScript

我使用tfCont id为输入添加了data-属性，以便它们可以在添加时成对操作。

此外，我使用on()方法，以便可以动态添加对象。它在fTypex类上进行过滤。

$(document).ready(function() {
    var tfCont = 0;
    var InputsWrapper = $("#InputsWrapper");
    var x = InputsWrapper.length; 
    var namefield = $("#tfButton");

    $(namefield).click(function() {
        tfCont++;

        $(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..." data-tfcount="' + tfCont + '"/>' + '<br>' + '</div>' + '</div>');

         $("#OuterWrapper").append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '" data-tfcount="' + tfCont + '">' + '</div>');


        x++;
        return false;
    });


    $(document).on("click blur keyup", "input.fTypex", function() {
        var tfc = $(this).data("tfcount");
        $("#tf_" + tfc).val(this.value);
    });
});

我必须将$(OuterWrapper)从您的示例更改为$("#OuterWrapper")，因为没有变量。

Answer 2

尝试这样的事情：

使用onkeyup来调用绑定值的函数 HTML

  <body>
   <input id='ip1' onkeyup='updateOther(this);' type='text'>
   <input id='ip2' type='text'>


   <script src="script.js"></script>
  </body>

JS：

function updateOther(obj){
    $('#ip2').val($(obj).val())  ;
}

http://plnkr.co/edit/dpwav5fGcisZcjBIzYyz?p=preview

同时更新两个动态文本字段

2 个答案: