Question

我试图一次选择多个文本框，并启动“复制到剪贴板”命令，但只有第3个文本字段总是突出显示或选中。

HTML：

<input type="text" class="copyText" placeholder="Name"><br>
<input type="text" class="copyText" laceholder="Phone"><br>
<input type="text" class="copyText" placeholder="E-Mail"><br>
<button>Copy</button>

JS：

$('button').on('click', function () {
    var copyText =  $(':input[type="text"]';
    copyText.select();
    document.execCommand('copy');
    alert('Text Copied');
});

Answer 1

这种方式更像是骇客，但行之有效，因为我们必须创建一个元素并使用position:absolute;left:-1000px隐藏它。这个想法是对输入进行迭代并将值保存到数组中，然后我们必须将这些值存储到不可见的新输入中。最后，我们选择该输入的值。

   $('button').on('click', function() {

  var values = $('.copyText').map(function(i, e) {
return $(e).val();
  }).get();

  var phantom = document.createElement("textarea");
  phantom.setAttribute("style", "position:absolute;left:-1000px");

  phantom.innerHTML =  values.join("\n");

  document.body.appendChild(phantom);

  phantom.select();

  document.execCommand('copy');
  alert('Text Copied');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="copyText" placeholder="Name"><br>
<input type="text" class="copyText" laceholder="Phone"><br>
<input type="text" class="copyText" placeholder="E-Mail"><br>
<button>Copy</button>

Answer 2

使用jQuery的each()功能

$('button').on('click', function () {
    $(':input[type="text"]').each(function( index ){
      $(this).select();
      document.execCommand('copy');
      alert('Text Copied');
    });
});

Doc jQuery：https://api.jquery.com/each/

突出显示多个文本框

2 个答案: