如何将一个文本区域拆分为两个文本区域?
问题描述:
我已将两个文本区域值连接成一个文本区域值。现在,当我点击回复按钮时,我想将文本区域拆分为旧的两个文本区域。 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>
答
您应该使用分隔符,以便您可以将值分割回textareas。
<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/
答
使用长度,你可以做如下
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)
你不改变在以前的文本区域东西,所以复原的情况只更新新的一个空值。 – bhansa
为了能够分割你必须使用一个独特的分隔符(“” - 这一个是没有帮助的) –
我将点击提交按钮时清空前两个textareas。 –