入力からテキストボタンをコピー

Question

私は複数のレコードを持っています。各レコードには、一意のテキストが入力され、このテキストをクリップボードにコピーするボタンがあります。私は1つのレコードしかない限り、すべてうまく動作します。複数のレコードの場合は、最初のレコードだけが動作するように見えます。私はそれが多くの入力とボタン、任意のアドバイスで動作するように助けが必要でしょうか？別の質問は、入力を隠すことが可能かどうかである（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：jsFiddleへ

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'); 
    } 
}); 

リンク：あなたが持つすべてを選択したい場合は

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>

あなたが隠し入力からコピーしようとしている場合、私はこれを使用することをお勧めします：私は私の問題のJavascriptの一部を解決し@Mojtabaへhttps://github.com/terinjokes/zClip

Answer 2

querySelectorは、1つの要素を選択し、与えられたクラスを使用してquerySelectorAllを実行し、次にtを繰り返します。コレクションとイベントハンドラをそれらにバインドします。

Answer 3

感謝を。私は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; 

OK働く