web-dev-qa-db-ja.com

クリップボードへのJavaScriptコピーが機能しない

スクリプトにエラーを与える関数があります。関数の目的は、onClickイベントを使用して静的パネル（テキストボックスまたは入力ではない）からテキストをコピーすることです。

不明なTypeError：copyText.selectは関数ではありません

私が欲しいのは、ユーザーがテキストをクリックできるようにすることであり、それは彼のクリップボードにコピーされます。

機能するより良い機能を提供できるでしょうか？

https://codepen.io/abooo/pen/jYMMMN?editors=101

function myFunction() {
  var copyText = document.getElementById("display");
  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.value);
}

W3schoolsから

javascripthtmldomcopy-paste
9
user7570296

これにより、要素のテキストをコピーできます。複雑なレイアウトではテストしていませんが。

これを使用する場合は、アラートを削除し、コンテンツがコピーされたことをユーザーに知らせるためのより良い方法を提供します。

SAFARI：これは、バージョン10.0より前のSafariでは機能しません。しかし Safari 10. 現在、これは機能しています。

_function copyText(element) {
  var range, selection, worked;

  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();        
    range = document.createRange();
    range.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  
  try {
    document.execCommand('copy');
    alert('text copied');
  }
  catch (err) {
    alert('unable to copy text');
  }
}_
<h1 id='display' onClick='copyText(this)'>Text Sample</h1>

_<input>_または_<textarea>_要素でこれを使用する場合は、コードが異なることをお知らせください。

Try/catchは、例外をスローするSafariの古いバージョン用です。したがって、バージョン10.0より前のSafariをサポートする予定がない場合は、削除できます。

10
Intervalia

Intervaliaによる素晴らしい答え。

少し改善されましたが、クリックした要素がコピーしたい要素ではない場合があります。
したがって、コピーする要素のIDを渡すことをお勧めします。

<button onClick='copyText("display")'> Copy </button>
<h1 id='display'> Text Sample </h1>

そして、あなたの関数の最初の行で

element = document.getElementById(element);

大した違いはありませんが、この方法の方が便利だと思います。

3
Hike Nalbandyan

select()メソッドは、テキストフィールドの内容を選択するために使用されます。 h1要素では機能しません。

0
mac

こんにちは、私はそれを調べましたが、textInputを使用していないので、単に.select() functionを使用することはできません。 javascriptでアイテムを強調表示する方法について、仲間のスタックオーバーフロー開発者Jasonからいくつかのコードを借りました。

マウスで強調表示するような要素のテキストを選択します。

function selectedText(element)(){

_var doc = document,
text = doc.getElementById(element)
range, selection;

if(doc.body.createTextRange){ 
 range = document.body.createTextRange();
 range.moveToElementText(text);
 range.select(); 
}
else if(window.getSelection){
  selection = window.getSelection();
  range = document.createRange();
  range.selectNodeContents(text);
  selection.removeAllRanges();
  selection.addRange(range);   
}

return range;
_

次に、範囲を返すように変更しました。そして、あなたがしなければならないのはそれだけです

_document.onclick = function(e){
  if(e.target.className === 'click'){

      var copytext = SelectText('display');
      document.execCommand("copy");
      alert("Copied the text: " + copytext);
   }
}
_

ここで重要なのは、文字列が.execCommand() is lower case 'copy'に渡されることです

0
Andres C.