如何將一個文本區域分為兩個文本區域？

Question

我已將兩個text-area值串聯到一個text-area值中。 現在，當我單擊“還原”按鈕時，我想將文本區域拆分為舊的兩個文本區域。 html查看圖像和下面給出的代碼：

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/

Answer 2

使用長度，您可以執行以下操作

var textbox1="testt ttets tetstend__";
var textbox2="my second textbox2";

//added a space between;
var mergedTextbox=textbox1+' '+textbox2;

console.log(textbox1.length,textbox2.length,mergedTextbox.length);

var splited1=mergedTextbox.substr(0,textbox1.length);
var splited2=mergedTextbox.substr((textbox1.length+1),textbox2.length);

console.log(splited1,splited2)