Javascript 如何动态显示'；在HTML页面上，多行框上的标题框中是否实时显示？

我有一个像这样的HTML标题框

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

我假设如果我编辑行框中的任何文本，它一定不能触及标题文本（否则事情会变得一团糟）

我该怎么做？

我可以根据需要将

class

的

id

添加到textarea标记中。我不确定该使用哪种技术或如何开始

我的启动代码：

如果这是您想要的，请参阅下面的一些现有文本


$（文档）.ready（函数（）{
$（“textarea[name='order[header_comments]']）。在（'keyup'，函数（e）上）{
var-keynum；
if（window.event）{//IE
keynum=e.keyCode；
}否则，如果（如）{//Netscape/Firefox/Opera
keynum=e.which；
}
//log（String.fromCharCode（keynum））；
让headerVal=String.fromCharCode（keynum）；
$（“textarea[name*='line_comments']）。每个（函数（）{
$（this.val（$（this.val（）+headerVal））；
});
});
});

如果这是您想要的，请参阅下面的一些现有文本


$（文档）.ready（函数（）{
$（“textarea[name='order[header_comments]']）。在（'keyup'，函数（e）上）{
var-keynum；
if（window.event）{//IE
keynum=e.keyCode；
}否则，如果（如）{//Netscape/Firefox/Opera
keynum=e.which；
}
//log（String.fromCharCode（keynum））；
让headerVal=String.fromCharCode（keynum）；
$（“textarea[name*='line_comments']）。每个（函数（）{
$（this.val（$（this.val（）+headerVal））；
});
});
});

一些现有文本
您可以使用如下内容：


var prevPrincipalVal=”“；
$（“#主体”）.keyup（函数（）{
var principal=$（this.val（）；
$（“.other”）。每个（函数（）{
$（this.val（$（this.val（）.replace）（新的RegExp（“^”+prevPrincipalVal+“\n*”），principalVal+“\n”）；
})
prevPrincipalVal=principalVal；
})

海关1
习惯2
自定义3
您可以使用以下内容：


var prevPrincipalVal=”“；
$（“#主体”）.keyup（函数（）{
var principal=$（this.val（）；
$（“.other”）。每个（函数（）{
$（this.val（$（this.val（）.replace）（新的RegExp（“^”+prevPrincipalVal+“\n*”），principalVal+“\n”）；
})
prevPrincipalVal=principalVal；
})

海关1
习惯2
自定义3
我认为这与您描述的内容非常接近（假设行注释不可修改）


var-previousLength=0；
$（“#headerBox”）。在（'keyup'，function（）上{
var headerVal=$（“#headerBox”）.val（）；
$（'.commentBox'）。每个（函数（）{
this.value=headerVal+this.value.substring（previousLength，this.value.length）；
});
previousLength=头距长度；
});

一些现有文本
我认为这与您描述的内容非常接近（假设行注释不可修改）


var-previousLength=0；
$（“#headerBox”）。在（'keyup'，function（）上{
var headerVal=$（“#headerBox”）.val（）；
$（'.commentBox'）。每个（函数（）{
this.value=headerVal+this.value.substring（previousLength，this.value.length）；
});
previousLength=头距长度；
});

一些现有文本
您尝试过做什么吗？我正在尝试可视化如何分离标题文本和行文本。我可以使用一种简单的方法，将标题文本作为-I-type复制到行文本中。但是，假设我去编辑一个行框，（如果我删除其中的所有文本怎么办？），然后返回到标题文本。编辑标题框时发生的行为未定义。我想我需要一种在每个行框中都有不可编辑的标题文本的方法。但是怎么做呢？你试过做什么了吗？我试着想象如何分离标题文本和行文本。我可以使用一种简单的方法，将标题文本作为-I-type复制到行文本中。但是，假设我去编辑一个行框，（如果我删除其中的所有文本怎么办？），然后返回到标题文本。编辑标题框时发生的行为未定义。我想我需要一种在每个行框中都有不可编辑的标题文本的方法。但是怎么做呢？谢谢这是个好的开始。这将有问题，虽然保持标题文本不变。此外，更新标题文本不会使行框与“标题文本第一”、“原始文本第二”保持同步。我想我需要找到一种方法，可能只是在行框中显示标题文本，而不是让它实际可编辑。我不确定，可能不是将int放入框中，而是让它看起来像在框中一样，或者可能在框前打印它（虽然这不太理想，但基本上仍然有效），因此如果我理解正确，您希望将新输入的文本预加到行注释文本中吗？是的。。。如果可能，使其不可修改（行框中的标题文本应不可修改）。这可能需要不同的方法嗯。。。这可能会变得棘手，因为我使用的方法每次在键向上时都会添加/追加一个字符，如果我们尝试预先挂起它，则行注释中的结果文本将与我们实际键入的相反。意思是如果我键入
OMER
，它将被追加为
REMO
。谢谢，这是一个好的开始。这将有问题，虽然保持标题文本不变。此外，更新标题文本不会使行框与“标题文本第一”、“原始文本第二”保持同步。我想我需要找到一种方法，可能只是在行框中显示标题文本，而不是让它实际可编辑。我不确定，也许不是把int放在盒子里，而是让它看起来像在盒子里，或者在盒子前面打印出来（虽然这不太理想，但基本上仍然有效），所以如果我理解的话
<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}

$('input[order[header_comments]]').change(function(){
var headText = $(this).val() ;
    $("textarea[name*='line_comments']").each(function() {
      $(this).val(headText + ' ' + $(this).val());
    });
});