スクリプトにエラーを与える関数があります。関数の目的は、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から
これにより、要素のテキストをコピーできます。複雑なレイアウトではテストしていませんが。
これを使用する場合は、アラートを削除し、コンテンツがコピーされたことをユーザーに知らせるためのより良い方法を提供します。
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をサポートする予定がない場合は、削除できます。
Intervaliaによる素晴らしい答え。
少し改善されましたが、クリックした要素がコピーしたい要素ではない場合があります。
したがって、コピーする要素のIDを渡すことをお勧めします。
<button onClick='copyText("display")'> Copy </button>
<h1 id='display'> Text Sample </h1>
そして、あなたの関数の最初の行で
element = document.getElementById(element);
大した違いはありませんが、この方法の方が便利だと思います。
select()
メソッドは、テキストフィールドの内容を選択するために使用されます。 h1
要素では機能しません。
こんにちは、私はそれを調べましたが、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'
に渡されることです