javascript - 如何将一个文本区域拆分为两个文本区域？

Question

我已将两个文本区域值连接成一个文本区域值。现在，当我单击恢复按钮时，我想将文本区域拆分为旧的两个文本区域。 Html View 图像和代码如下:

HTML:

<div class="container">
  <h3 class="text-center text-primary">TextArea Concatenate and Revert</h3>
  <div class="row">
    <div class="col-md-5">
      <div class="row">
        <div class="col-md-12">
          <textarea rows="4" cols="50" id="text_area_1"></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <textarea rows="4" cols="50" id="text_area_2"></textarea>
        </div>
      </div>
        <button type="button" class="btn btn-success" onclick="concatenate()">Concatenate</button>
    </div>
    <div class="col-md-5">
      <textarea rows="8" cols="100" id="text_area_3"></textarea>
      <input type="submit" class="btn btn-warning" value="Revert">
    </div>
  </div>
</div>

Javascript:

<script>
  function concatenate(){
    document.getElementById("text_area_3").value =
    document.getElementById("text_area_1").value + " " +
    document.getElementById("text_area_2").value;
    }
</script>

Answer 1

您可能应该使用分隔符，以便可以将值拆分回文本区域。

<script>
var one = document.getElementById("text_area_1");
var two = document.getElementById("text_area_2");
var three = document.getElementById("text_area_3");

function concatenate(){
  three.value = one.value + ":" + two.value;
  one.value = "";
  two.value = "";
  }

function revert(){
    var val = three.value.split(":");
    one.value = val[0];
    two.value = val[1];
    three.value = "";
    }
</script>

请参阅我创建的示例:https://jsfiddle.net/ft05wyxt/