Question

我正在尝试在一个公共文本区域中显示三个文本区域的内容。无论我输入的文本区域是什么，都应同时显示在公共文本区域内。

我尝试使用jquery keyup()方法来做到这一点，但这只是部分有用。无论我在特定文本区域（在前三个文本区域中）书写的内容是在公共文本区域中出现的，但是问题是-当我开始在下一个文本区域中书写时，先前的书写文本已从公共文本区域中删除，并且仅显示当前文本区域的文本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="rmks4.1" cols="28" rows="5" id="txt_area1"></textarea>
<textarea name="rmks4.2" cols="28" rows="5" id="txt_area2"></textarea>
<textarea name="rmks4.3" cols="28" rows="5" id="txt_area3"></textarea>
<textarea name="remarks" class="output"></textarea>



<script type="text/javascript">
  $(document).ready(function() {
    $("#txt_area1").keyup(function() {
      // Getting the current value of textarea
      var currentText = $(this).val();

      // Setting the Div content
      $(".output").text(currentText);
    });
  });
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $("#txt_area2").keyup(function() {
      // Getting the current value of textarea
      var currentText = $(this).val();

      // Setting the Div content
      $(".output").text(currentText);
    });
  });
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $("#txt_area3").keyup(function() {
      // Getting the current value of textarea
      var currentText = $(this).val();

      // Setting the Div content
      $(".output").text(currentText);
    });
  });
</script>

我希望显示在三个文本区域中输入的任何内容在普通文本区域中是逐点的。

我是HTML和javascript的新手，将不胜感激。

Answer 1

尝试这样。

在这里，我向前三个文本区域添加了一个通用类。在keyup事件中使用该类，我得到了值并将其附加为输出textarea值

$(document).ready(function(){
    $(".txtar").keyup(function(){
    // Getting the current value of textarea
      var txt1 = $('#txt_area1').val();
      var txt2 = $('#txt_area2').val();
      var txt3 = $('#txt_area3').val();
      txt1 = (txt1)?txt1 + "\n":'';
      txt2 = (txt2)?txt2 + "\n":'';
      txt3 = (txt3)?txt3 + "\n":'';
      // Setting the Div content
      $(".output").val(txt1 + txt2 + txt3);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea  name="rmks4.1" cols="28" rows="5" id="txt_area1" class="txtar"></textarea>
<textarea  name="rmks4.2" cols="28" rows="5" id="txt_area2" class="txtar"></textarea>               
<textarea  name="rmks4.3" cols="28" rows="5" id="txt_area3" class="txtar"></textarea>
<textarea name="remarks" class="output" cols="28" rows="5"></textarea>

Answer 2

同样，使用本机DOM API可以很容易做到非常。这里不需要jQuery。

const textareas = [...document.querySelectorAll('textarea[name^=rmks]')];

document.addEventListener('DOMContentLoaded', () => {
  for (const textarea of textareas) {
    textarea.addEventListener('input', () => {
      remarks.value = textareas.reduce((acc, val)=> acc + (val.value ? val.value + '\n' : ''), '');
    })
  }
})

<textarea name="rmks4.1" cols="28" rows="5" id="txt_area1"></textarea>
<textarea name="rmks4.2" cols="28" rows="5" id="txt_area2"></textarea>               
<textarea name="rmks4.3" cols="28" rows="5" id="txt_area3"></textarea>
<textarea name="remarks" id="remarks" class="output"></textarea>

这是一个使用委托侦听器 来动态添加文本区域的版本：

document.addEventListener('input', (evt) => {
  if (evt.target.matches('textarea[name^=rmks]')) {
    const textareas = Array.from(document.querySelectorAll('textarea[name^=rmks]'));
    remarks.value = textareas.reduce((acc, val)=> acc + (val.value ? val.value + '\n' : ''), '');
  }
})

window.setTimeout(() => {
  document.body.innerHTML = `<textarea name="rmks4.1" cols="28" rows="5" id="txt_area1"></textarea>
<textarea name="rmks4.2" cols="28" rows="5" id="txt_area2"></textarea>               
<textarea name="rmks4.3" cols="28" rows="5" id="txt_area3"></textarea>
<textarea name="remarks" id="remarks" class="output"></textarea>`
}, 2000);

如何动态地将三个文本区域的内容显示为一个公共文本区域？

2 个答案: