javascript - 如何在HTML页面上实时动态地显示多个行框的标题框中的文本？

我有一个类似这样的HTML标题框

<textarea name="order[header_comments]"></textarea>

然后我有这样的行注释框：

<textarea name="line_comments[0][line_comments]"></textarea>
<textarea name="line_comments[1][line_comments]"></textarea>
...
<textarea name="line_comments[n][line_comments]"></textarea>

行框中可能已经有一些文本。
我想做的是：
当我在页眉框中键入任何内容时，我希望它立即预挂在所有行注释框中。也就是说，所有行注释框在任何时候都需要具有此功能，即使行框是在填写标题框之前或之后编辑的：

{real-time header text}{EOL}{any text that was there already}

我假设如果我编辑了行框中的任何文本，它不能接触到标题文本（否则事情会变得一团糟）。
我该怎么做？
我可以根据需要将id的class添加到textarea标记中。我不知道该使用哪种技术，也不知道如何开始。
我的起始代码：

<textarea name="order[header_comments]" placeholder="header box"></textarea>

<textarea name="line_comments[0][line_comments]"></textarea>
<textarea name="line_comments[1][line_comments]">some existing text</textarea>

最佳答案

你可以用这样的东西：

var prevPrincipalVal = "";
$("#principal").keyup(function(){
    var principalVal = $(this).val();
    $(".other").each(function(){
         $(this).val($(this).val().replace(new RegExp("^" + prevPrincipalVal + "\n*"), principalVal + "\n"));
    })
    prevPrincipalVal = principalVal;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="principal"></textarea>
<textarea class="other">Custom 1</textarea>
<textarea class="other">Custom 2</textarea>
<textarea class="other">Custom 3</textarea>

基本思想是保存主体<textarea>的前一个值，并在每个<textarea>中用新值替换前一个值。这些需要完善，您必须从主体<textarea>的文本中转义所有特殊的regex字符。

关于javascript - 如何在HTML页面上实时动态地显示多个行框的标题框中的文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47228955/