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

请参阅下面的代码。我一次创建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>

来源

2014-09-02 Nelie

你想每个人都更新其他？或者只是一个更新另一个？ – jwatts1980 2014-09-02 18:47:18

@ jwatts1980：我希望能够输入'field_ + tfCont'和'tf_ + tfCont'来更新。 – Nelie 2014-09-02 18:52:04

Nelie，我在下面添加了一个答案，我相信做你想做的。 – jwatts1980 2014-09-02 19:09:52

我创建了一个小提琴，我觉得做你想做的事：http://jsfiddle.net/3h1h5j7y/

这是代码。 HTML

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

的JavaScript

我添加了一个data-属性与tfCont ID的输入，使得它们可以作为它们被添加在对操作。

此外，我正在使用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")，因为没有一个变量。

来源

2014-09-02 19:04:56 jwatts1980

美丽！谢谢。 – Nelie 2014-09-02 19:21:56

尝试是这样的：

使用的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

来源

2014-09-02 18:58:45

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

回答

相关问题