时间戳

首页 > 解决方案 > 如何使用链接使用 jquery 将值从一个输入复制到另一个输入

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

问题描述

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

标签： jqueryforms

解决方案

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>

推荐阅读