javascript - 一键复制之前输入的内容

Question

我有一些 html 和 jQuery 如下：

$(".btn-copy").click(function() {
  var previousContent = $(this).prev()[0];
  previousContent.select();
  document.execCommand('copy');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-fiche item-hidden">
  <label>
        Identifier
        <input type="text" name="login-1" placeholder="Write you login" value="My login">
        <button class="btn-copy">Copy</button>
    </label>
  <label>
        Password
        <input type="password" name="password-1" placeholder="Write your password" value="My password">
        <button class="btn-copy">Copy</button>
        <button class="btn-save">Save</button>
    </label>
</div>

当我单击第一个复制按钮时，“我的登录”被正确复制。但是当我单击第二个复制按钮时，副本没有更新，就像没有找到任何元素一样，虽然我可以看到在单击按钮时选择了密码。

有任何想法吗？

标签： javascripthtmljquery

Answer 1

出于安全目的，具有类型的输入字段password不支持复制其内容。如果要复制，必须将字段类型更改为text，复制文本，然后再更改回password。

$(".btn-copy").click(function() {
  var previousContent = $(this).prev()[0];
  var fieldType = previousContent.type; // Saving orig field type

  // Set current type to 'text'
  previousContent.type = 'text';
  previousContent.select();
  document.execCommand('copy');

  // Return back orig type for field
  previousContent.type = fieldType;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-fiche item-hidden">
  <label>
        Identifier
        <input type="text" name="login-1" placeholder="Write you login" value="My login">
        <button class="btn-copy">Copy</button>
    </label>
  <label>
        Password
        <input type="password" name="password-1" placeholder="Write your password" value="My password">
        <button class="btn-copy">Copy</button>
        <button class="btn-save">Save</button>
    </label>
</div>