JQuery 将一个输入值实时复制并粘贴到另一个

Question

我创建了一个带有表单的 PHP 页面，我在其中使用从数据库中获取的数据填充所有输入。我需要在“Titolo”字段中，当用户开始 edit/write 某些内容时，必须实时将此值复制并粘贴到“Meta Titolo”字段中。

我想解决方案可能是 JQuery，但我不知道该怎么做：/我尝试过类似的方法，但肯定行不通

$(document).ready(function() {
    $("#editor_titolo" ).on("keyup change", function(e) {
      var namer = $('.form-control').attr('#meta_titolo');
      $( namer).text($(this).val());
    });
  });

我的表单结构如下：

 <div class="col-6"> 
            <div class="row">
                <div class="col-15"> 
                    <form action="" method="POST" name="traduzione_testo">  
                        <label for="titolo" class="form-label form-control-lg">Titolo</label>
                        <input type="text" name='editor_titolo' id='editor_titolo' class="form-control"  style="height: 50px;weight: 100px;" placeholder="Titolo" value="<?= isset($titolo_tradotto) ? $titolo_tradotto: ''?>">
                </div>
                <div class="col-15"> 
                    <label for="meta-titolo" class="form-label  form-control-lg">Meta-Titolo</label>
                    <input type="text" name='meta_titolo' id='meta_titolo' class="form-control"  style="height: 50px;weight: 100px;" placeholder="Meta-Titolo" value="<?=isset($meta_titolo_tradotto) ? $meta_titolo_tradotto: ''?>">
                </div>
                <div class="col-15"> 
                    <label for="link-rewrite" class="form-label  form-control-lg">Link-Rewrite</label>
                    <input type="text" name='link-rewrite' id='link-rewrite' class="form-control"  style="height: 50px;weight: 100px;" placeholder="Link-rewrite"  value="<?=isset($link_rewrite_tradotto) ? $link_rewrite_tradotto: ''?>"> 
                    <button onclick="">Genera Rewrite-link</button> 
                </div>
                <div class="col-15"> 
                    <label for="descrizione" class="form-label  form-control-lg">Descrizione</label>
                    <textarea class="form-control" name='descrizione' id="descrizione" style="weight: 100px;height: 300px" rows="15" placeholder="Descrizione prodotto"><?PHP echo isset($descrizione_tradotto) ? $descrizione_tradotto : '' ?></textarea>  
                </div>
                <div class="col-15"> 
                    <label for="descrizione_breve" class="form-label  form-control-lg">Descrizione breve</label>
                    <textarea class="form-control" name='descrizione_breve' id="descrizione_breve" style="height: 70px;weight: 100px" rows="15" placeholder="Descrizione breve prodotto" ><?PHP echo isset($descrizione_breve_tradotto) ? $descrizione_breve_tradotto : '' ?></textarea>  
                </div>
                <button type="submit" name="submit" class="btn btn-primary btn-lg btn-block mt-2 px-3 mb-3">Salva</button>
                    </form>        
            </div>   
    </div>

Answer 1

不确定您要用 .attr("#meta_titolo") 做什么。

但是你可以这样做：

$(document).ready(function() {
  $("#editor_titolo").on("keyup change", function(e) {
    $("#meta_titolo").val($(this).val());
  });
});

另请注意，您正在尝试设置输入值，因此您需要使用 .val($(this).val()) 而不是 .text($(this).val())

演示

$(document).ready(function() {
  $("#editor_titolo").on("keyup change", function(e) {
    $("#meta_titolo").val($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
  <div class="row">
    <div class="col-15">
      <form action="" method="POST" name="traduzione_testo">
        <label for="titolo" class="form-label form-control-lg">Titolo</label>
        <input type="text" name='editor_titolo' id='editor_titolo' class="form-control" style="height: 50px;weight: 100px;" placeholder="Titolo" value="">
    </div>
    <div class="col-15">
      <label for="meta-titolo" class="form-label  form-control-lg">Meta-Titolo</label>
      <input type="text" name='meta_titolo' id='meta_titolo' class="form-control" style="height: 50px;weight: 100px;" placeholder="Meta-Titolo" value="">
    </div>
    <div class="col-15">
      <label for="link-rewrite" class="form-label  form-control-lg">Link-Rewrite</label>
      <input type="text" name='link-rewrite' id='link-rewrite' class="form-control" style="height: 50px;weight: 100px;" placeholder="Link-rewrite" value="<?=isset($link_rewrite_tradotto) ? $link_rewrite_tradotto: ''?>">
      <button onclick="">Genera Rewrite-link</button>
    </div>
    <div class="col-15">
      <label for="descrizione" class="form-label  form-control-lg">Descrizione</label>
      <textarea class="form-control" name='descrizione' id="descrizione" style="weight: 100px;height: 300px" rows="15" placeholder="Descrizione prodotto"><?PHP echo isset($descrizione_tradotto) ? $descrizione_tradotto : '' ?></textarea>
    </div>
    <div class="col-15">
      <label for="descrizione_breve" class="form-label  form-control-lg">Descrizione breve</label>
      <textarea class="form-control" name='descrizione_breve' id="descrizione_breve" style="height: 70px;weight: 100px" rows="15" placeholder="Descrizione breve prodotto"><?PHP echo isset($descrizione_breve_tradotto) ? $descrizione_breve_tradotto : '' ?></textarea>
    </div>
    <button type="submit" name="submit" class="btn btn-primary btn-lg btn-block mt-2 px-3 mb-3">Salva</button>
    </form>
  </div>
</div>

Answer 2

attr() 方法设置或 returns 属性和值，这是您在这里不需要的东西！

您只需要 meta_titolo id

$(document).ready(function() {
    $("#editor_titolo" ).on("keyup change", function(e) {
      var namer = $('#meta_titolo');
      namer.val($(this).val());
    });
  });

JQuery 将一个输入值实时复制并粘贴到另一个

JQuery copy and paste in real time a input value into another

javascript

forms

jquery