JavaScriptの知識はありませんが、さまざまなStack Overflowの回答のビットとボルトを使用して、このコードをまとめることができました。正常に機能し、選択されたすべてのチェックボックスの配列をアラートボックス経由でドキュメントに出力します。
function getSelectedCheckboxes(chkboxName) {
var checkbx = [];
var chkboxes = document.getElementsByName(chkboxName);
var nr_chkboxes = chkboxes.length;
for(var i=0; i<nr_chkboxes; i++) {
if(chkboxes[i].type == 'checkbox' && chkboxes[i].checked == true) checkbx.Push(chkboxes[i].value);
}
return checkbx;
}
そしてそれを呼び出すために私は使用します:
<button id="btn_test" type="button" >Check</button>
<script>
document.getElementById('btn_test').onclick = function() {
var checkedBoxes = getSelectedCheckboxes("my_id");
alert(checkedBoxes);
}
</script>
btn_test
ボタンをクリックすると、出力配列checkbx
がクリップボードにコピーされるように変更します。私は追加しようとしました:
checkbx = document.execCommand("copy");
または
checkbx.execCommand("copy");
関数の最後で、次のように呼び出します:
<button id="btn_test" type="button" onclick="getSelectedCheckboxes('my_id')">Check</button>
しかし、それは機能しません。データはクリップボードにコピーされません。
OK、私はしばらく時間を見つけて、提案に従って Teem をたどり、私が望むものを正確に得ることができました。
興味がある人のための最終的なコードは次のとおりです。明確にするために、このコードは特定のIDのすべてのチェックされたチェックボックスを取得し、ここにcheckbx
という名前の配列で出力し、一意の名前をクリップボードにコピーします。
JavaScript関数:
function getSelectedCheckboxes(chkboxName) {
var checkbx = [];
var chkboxes = document.getElementsByName(chkboxName);
var nr_chkboxes = chkboxes.length;
for(var i=0; i<nr_chkboxes; i++) {
if(chkboxes[i].type == 'checkbox' && chkboxes[i].checked == true) checkbx.Push(chkboxes[i].value);
}
checkbx.toString();
// Create a dummy input to copy the string array inside it
var dummy = document.createElement("input");
// Add it to the document
document.body.appendChild(dummy);
// Set its ID
dummy.setAttribute("id", "dummy_id");
// Output the array into it
document.getElementById("dummy_id").value=checkbx;
// Select it
dummy.select();
// Copy its contents
document.execCommand("copy");
// Remove it as its not needed anymore
document.body.removeChild(dummy);
}
そして、そのHTML呼び出し:
<button id="btn_test" type="button" onclick="getSelectedCheckboxes('ID_of_chkbxs_selected')">Copy</button>
function copyToClipboard(text) {
var dummy = document.createElement("textarea");
// to avoid breaking orgain page when copying more words
// cant copy when adding below this code
// dummy.style.display = 'none'
document.body.appendChild(dummy);
//Be careful if you use texarea. setAttribute('value', value), which works with "input" does not work with "textarea". – Eduard
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
copyToClipboard('hello world')
copyToClipboard('hello\nworld')
非常に便利。 JavaScript変数値をクリップボードにコピーするように変更しました:
function copyToClipboard(val){
var dummy = document.createElement("input");
dummy.style.display = 'none';
document.body.appendChild(dummy);
dummy.setAttribute("id", "dummy_id");
document.getElementById("dummy_id").value=val;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
テキストをクリップボードにコピーする一般的な目的のために、次の関数を作成しました。
function textToClipboard (text) {
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
パラメーターの値は、新しく作成された<textarea>
の値に挿入され、選択されます。その値はクリップボードにコピーされ、ドキュメントから削除されます。
Chrome devコンソールでクリップボードに変数をコピーする必要がある場合は、copy()
コマンドを使用できます。
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#copyobject
hiddeninput
要素をbody
に追加することにより、テキストボックスを表示せずにテキストをクリップボードにコピーすることができました()。
function copy(txt){
var cb = document.getElementById("cb");
cb.value = txt;
cb.style.display='block';
cb.select();
document.execCommand('copy');
cb.style.display='none';
}
<button onclick="copy('Hello Clipboard!')"> copy </button>
<input id="cb" type="text" hidden>
誰かが2つの異なる入力をクリップボードにコピーしたい場合、追加したいだけです。また、変数に変数を配置する手法を使用してから、2つの入力からの変数のテキストをテキスト領域に配置しました。
注:以下のコードは、複数のユーザー入力をクリップボードにコピーする方法を尋ねるユーザーからのコードです。正しく動作するように修正しました。そのため、var
またはlet
の代わりにconst
を使用するような古いスタイルが必要です。ボタンにはaddEventListener
を使用することもお勧めします。
function doCopy() {
try{
var unique = document.querySelectorAll('.unique');
var msg ="";
unique.forEach(function (unique) {
msg+=unique.value;
});
var temp =document.createElement("textarea");
var tempMsg = document.createTextNode(msg);
temp.appendChild(tempMsg);
document.body.appendChild(temp);
temp.select();
document.execCommand("copy");
document.body.removeChild(temp);
console.log("Success!")
}
catch(err) {
console.log("There was an error copying");
}
}
<input type="text" class="unique" size="9" value="SESA / D-ID:" readonly/>
<input type="text" class="unique" size="18" value="">
<button id="copybtn" onclick="doCopy()"> Copy to clipboard </button>
執筆時点では、要素のdisplay:none
の設定は機能しませんでした私にとっては。要素の幅と高さを0に設定することもできませんでした。そのため、これを機能させるには、要素の幅が少なくとも1px
でなければなりません。
次の例は、ChromeおよびFirefoxで機能しました。
const str = 'Copy me';
const el = document.createElement("input");
// Does not work:
// dummy.style.display = "none";
el.style.height = '0px';
// Does not work:
// el.style.width = '0px';
el.style.width = '1px';
document.body.appendChild(el);
el.value = str;
el.select();
document.execCommand("copy");
document.body.removeChild(el);
ブラウザがこのハック的なアプローチを阻止しようとしている理由がわかることを付け加えます。コピーするコンテンツをユーザーのブラウザーにオープンに表示することをお勧めします。しかし、時には設計要件があるため、変更できません。