同時更新兩個動態文本字段

請參閱下面的代碼。我一次創建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

同時更新兩個動態文本字段

回答

相關問題