javascript - 突出显示多个文本框

我试图一次选择多个文本框，并启动“复制到剪贴板”命令，但只有第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');
});

最佳答案

这种方式更像是骇客，但行得通，因为我们必须创建一个元素并使用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>