從輸入複製文本按鈕

Question

我有多個記錄。每個記錄都有一個帶有獨特文本prdefined的按鈕，並將按鈕複製到剪貼板。只要我只有一條記錄，一切正常。如果有多個記錄，只有第一個記錄似乎有效。我需要幫助才能使用許多輸入和按鈕，有什麼建議嗎？另一個問題是如果可以隱藏輸入（type ='hidden'）。我嘗試過，但似乎沒有工作。

我的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然後重複t通過收集並綁定事件處理程序。

Answer 3

由於@Mojtaba我解決我的問題的JavaScript部分。我也設法隱藏CSS的輸入。我想我應該使用zClip，但現在CSS的快捷方式工作形式。

只需添加類的輸入（。輸入-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;