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

Updating two dynamic text fields simultaneously

本文关键字：两个 动态 文本 字段 更新      更新时间：2023-09-26

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

我创建了一个小提琴，我认为它可以满足您的需求：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")，因为没有变量。

试试这样的东西：

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

相关文章：