Question

我有多条记录。每条记录都有一个带有唯一文本prdefined的输入和用于将此文本复制到剪贴板的按钮。只要我只有一条记录，一切都很好。在多个记录的情况下，只有第一个似乎工作。我需要帮助才能使用许多输入和按钮，任何建议？另一个问题是，是否可以隐藏输入（类型=＆＃39;隐藏＆＃39;）。我试过了，但它似乎没有用。

我的HTML：

<input  id='1' class="js-copytextarea" value='Sample Text to Copy 1 '>
<button  class="js-textareacopybtn" data-id="1">COPY</button>
<br>    
<input  id='2' class="js-copytextarea" value='Sample Text to Copy 2 '>
<button class="js-textareacopybtn" data-id="2">COPY</button>

JavaScript的：

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
    var elem = $(this), selectedinput = elem.attr('data-id'); 
  console.log(selectedinput);
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

链接到jsFiddle：

https://jsfiddle.net/nitadesign/p58z0yrq/3/

Answer 1

如我所见，您已经将jQuery库附加到您的代码中。因此，您可以使用jQuery来简化它。

$('.js-textareacopybtn').on('click', function(event) {
  var copyTextarea = $(this).data('id');
  $('#' + copyTextarea)[0].select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  id='1' class="js-copytextarea" value='Sample Text to Copy 1 '>
<button  class="js-textareacopybtn" data-id="1">COPY</button>
<br>    
<input  id='2' class="js-copytextarea" value='Sample Text to Copy 2 '>
<button class="js-textareacopybtn" data-id="2">COPY</button>

如果您要从隐藏的输入中复制，我建议您使用：https://github.com/terinjokes/zClip

Answer 2

querySelector只选择一个元素，如果要选择具有给定类的所有元素，请使用querySelectorAll，然后遍历集合并将事件处理程序绑定到它们。

Answer 3

感谢@Mojtaba我解决了Javascript部分问题。我还设法用CSS隐藏输入。我想我应该使用zClip但是现在CSS快捷方式可以构成我。

只需将类添加到输入（.input-noshow）

CSS：

.input-noshow {
    background-color: transparent;
    border: 0px;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width:5px;
    color:transparent;
    cursor:default;
}
.input-noshow::selection {
  background: transparent;
}
.input-noshow::-moz-selection {
  background: transparent;

从输入中复制文本按钮

3 个答案: