如何从一个输入使用链接复制值到另一个与jquery

Question

我使用WordPress的网站强大的表格插件。我创建了一个相当大的和详细的表格 - 我希望通过允许用户一个完成字段的值复制到另一个字段（如果从第一个提交的数据是加快通过我的网站用户在填写表格的过程同为第二场），而不必键入从第二，相同的输入。

强大形式把每个字段具有唯一的ID（在下文中我的示例中，用户将完成字段104和具有添加至105所输入的值）。

我试图让用户点击一个链接的字段（104）之后，这样，一旦点击，该值将被复制到现场旁边（105）

因此，例如：FIELD 1 - “field_1的价值”>点击复制>字段2 “ - field_1的价值”

我已经写了下面的脚本在jQuery和它连接到我的HTML表单代码，但它缺少的环节，我无法得到它的工作...

（我读过这里的一切有关于这个问题，但我现在在台上的时候，我认真地需要帮助....）

    <script>
jQuery(document).ready(function ($) {
    "use strict";
    // monitor field 1 for changes
    $('104').on('change', function() {
        var val1 = $(this).val();
        // assign the value to field 2
        $('105').val(val1);
    });
});
</script>

Answer 1

我会看在keydown的变化，并决定如果输入至少3个或更多字符复制字段值，像这样：

$('#field2').keydown(function(e) {
  var field1 = $('#field1').val();
  var similarFieldDetected = this.value.length >= 2 && field1.startsWith(this.value);

  $(this).next('a.copy').toggle(similarFieldDetected);
});

$('a.copy').click(function(e) {
  e.preventDefault();
  var field1 = $('#field1').val();

  $('#field2')
    .val(field1)
    .focus()
    .next('a.copy')
    .hide();
});

html, body {
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-10">
  <div class="form-group">
    <label for="field1">Address 1:</label>
    <input id="field1" class="form-control" placeholder="Enter your address" />
  </div>

  <div class="form-group">
    <label for="field2">Address 2:</label>
    <input id="field2" class="form-control" placeholder="Try typing out exactly the same value as Address 1" />
    <a class="copy form-text" href="#" style="display:none;">
      <small><i class="mdi mdi-content-copy"></i> Copy Address #1</small>
    </a>
  </div>
</div>