如何在 HTML 页面上实时动态显示多个行框中 header 框中的文本？

Question

我有一个 HTML header 这样的盒子

<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>

行框中可能已经有一些文本。

我想做的是这样的：

当我在 header 框中键入任何内容时，我希望它立即 pre-pended 到所有行注释框。这就是所有的行注释框都需要始终有这个，即使行框被编辑，在 header 框被填充之前或之后：

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

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

我该怎么做？

我可以根据需要将 id for 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>

Answer 1

如果这是您想要的，请参阅下文

$(document).ready(function() {
  $("textarea[name='order[header_comments]']").on('keyup', function(e) {
    var keynum;

    if (window.event) { // IE                    
      keynum = e.keyCode;
    } else if (e.which) { // Netscape/Firefox/Opera                   
      keynum = e.which;
    }
    //console.log(String.fromCharCode(keynum));
    let headerVal = String.fromCharCode(keynum);
    $("textarea[name*='line_comments']").each(function() {
      $(this).val($(this).val() + headerVal);
    });

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

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

Answer 3

你可以这样使用：

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>.

的文本中转义所有特殊的正则表达式字符

Answer 4

我认为这与您的描述很接近（假设行注释应该是不可修改的）。

var previousLength = 0;
$("#headerBox").on('keyup', function() {
  var headerVal = $("#headerBox").val();
  $('.commentBox').each(function(){ 
       this.value = headerVal + this.value.substring(previousLength, this.value.length);
  });
  previousLength = headerVal.length;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="headerBox" name="order[header_comments]" placeholder="header box"></textarea>

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

编辑：这演示了 "protecting" 行注释中前置的 header 内容。尝试修改行注释的 header 部分将立即恢复。它并不完美，我敢肯定有些情况没有被考虑在内，但希望这是一个有用的起点。

var previousLength = 0;
$("#headerBox").on('keyup', function() {
  var headerVal = $("#headerBox").val();
  $('.commentBox').each(function(){ 
    this.value = headerVal + this.value.substring(previousLength, this.value.length);
  });
  previousLength = headerVal.length;
});

var beforeChange = "";
$('.commentBox').on('keydown', function() {
  beforeChange = this.value;  
});

$('.commentBox').on('keyup', function() {  
  var headerVal = $("#headerBox").val();
  if (!this.value.startsWith(headerVal)){
    this.value = beforeChange;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="headerBox" name="order[header_comments]" placeholder="header box"></textarea>

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

如何在 HTML 页面上实时动态显示多个行框中 header 框中的文本？

How to dynamically show text that's in a header box on multiple line boxes in real time on an HTML page?

html

javascript

jquery

jquery-selectors