Question

我在Wordpress网站上使用了强大的表单插件。我创建了一个相当大而详细的表格-我希望通过允许用户将一个完整字段的值复制到另一个字段（如果第一个文件中的数据是第二个字段相同），而不必键入第二个相同的输入。

Formidable Forms使用唯一的ID处理每个字段（在下面的示例中，用户将填写字段104并将输入的值添加到105）。

我试图让用户单击字段（104）后面的链接，以便一旦单击该值，就将其复制到它旁边的字段（105）

例如： FIELD 1-“ field_1的值”>单击以复制> FIELD 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>

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

1 个答案: