HTMLとJSでコピーボタンを作る

特定のdivをクリックしてクリップボードにコピーしたいのですが、インターネット上で3日間検索しても何も機能していません。例がある場合は、HEREに行ってください。私は、16進コードをクリックしてクリップボードにコピーしたい、誰かが私を助けることができますか？ブラウザでクリップボードへHTMLとJSでコピーボタンを作る

<html> 
 
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" /> 
 

 
<head> 
 
    <style> 
 
    #text { 
 
     width: 100%; 
 
     height: 700px; 
 
     text-align: center; 
 
     font-size: 50px; 
 
     font-family: 'Quicksand'; 
 
    } 
 
    body { 
 
     text-align: center; 
 
     font-family: 'Quicksand'; 
 
     margin-top: 0px; 
 
     margin-bottom: 0px; 
 
     margin-left: 0px; 
 
     margin-right: 0px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <h1>Rainbow Hover</h1> 
 
    <h2><strong>Hover over the rainbow to get a random color!</strong></h2> 
 
    <div id="text"></div> 
 
    <script type="text/javascript"> 
 
    var div = document.getElementById('text'), 
 
     randomColor = function(e) { 
 
     var hex = Math.floor(Math.random() * 0xFFFFFF), 
 
      res = e.target, 
 
      result = "#" + hex.toString(16); 
 

 
     res.style.backgroundColor = result; 
 
     res.innerHTML = result; 
 
     }; 
 
    div.addEventListener('mouseover', randomColor); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-12-10 T. Bragg

あなたの質問に関連するソースコードが含まれ、あなたがしようとしているかを説明してください。 – NewToJS

OK。私はそれを行う/ –

（https://clipboardjs.com/） –

私は、それは（あなただけの純粋なJSとHTMLでこれを行うにしたいと仮定していますプラグインを使用しないで）。以下は、ほとんどのブラウザで機能するはずです（私はあなたのコードスタイルを模倣して、それをより簡単に追跡できるようにしようとしました）。もちろん、警告ダイアログは必要ありません。私はちょうどあなたが物事が意図したとおりに働いているかどうかを見てみましょう。

問題がある場合は教えてください。

P.S.私はここからselectText関数（Selecting text in an element (akin to highlighting with your mouse)、）とcopyColor関数（ここではHow do I copy to the clipboard in JavaScript?）を借用しました。

<html> 
 
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" /> 
 

 
<head> 
 
    <style> 
 
    #text { 
 
     width: 100%; 
 
     height: 700px; 
 
     text-align: center; 
 
     font-size: 50px; 
 
     font-family: 'Quicksand'; 
 
    } 
 
    body { 
 
     text-align: center; 
 
     font-family: 'Quicksand'; 
 
     margin-top: 0px; 
 
     margin-bottom: 0px; 
 
     margin-left: 0px; 
 
     margin-right: 0px; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <h1>Rainbow Hover</h1> 
 
    <h2><strong>Hover over the rainbow to get a random color!</strong></h2> 
 
    <div id="text"></div> 
 
    <script type="text/javascript"> 
 
    var div = document.getElementById('text'), 
 
     randomColor = function(e) { 
 
     var hex = Math.floor(Math.random() * 0xFFFFFF), 
 
      res = e.target, 
 
      result = "#" + hex.toString(16); 
 

 
     res.style.backgroundColor = result; 
 
     res.innerHTML = result; 
 
     }, 
 
     selectText = function (element) { 
 
     var range, selection;  
 
     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); 
 
     } 
 
     }, 
 
     copyColor = function(e) { 
 
     var copyTextDiv = e.target; 
 
     selectText(copyTextDiv); 
 

 
     try { 
 
      var copied = document.execCommand('copy'); 
 
      var msg = copied ? 'successful.' : 'unsuccessful.'; 
 
      alert('Color copy ' + msg); 
 
     } catch (err) { 
 
      console.log('Unable to copy on this browser.'); 
 
     }    
 
     }; 
 
    div.addEventListener('mouseover', randomColor); 
 
    div.addEventListener('click', copyColor); 
 
    </script> 
 
</body> 
 
</html>

出典

2016-12-10 16:27:02 user3495690

ありがとうございました。感謝します。 –

コピーが常に問題となって、Webサイトからクリップボードの内容を読み込み、上書きするセキュリティ上の問題になる可能性があるため、回避策を必要としています。

それ以外にも、最新のクロスブラウザのクリップボードソリューションがあります。これは、はるかに良いhttp://clipboardjs.comです。

ここでの使用方法を説明していますが、それはかなり簡単です。問題がある場合は、コードを表示して、わからないことを教えてください。

出典

2016-12-10 16:12:13 NikxDa

ClipboardJSを使用できます。

「onclickのイベント」でテキストをコピーするためには、次のようにプラグインを初期化する必要があります。

<div class='your-div'> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices erat ultricies euismod consequat. Duis tincidunt vestibulum nibh, non ornare eros lobortis at. In condimentum dapibus nibh, sit amet suscipit nunc vulputate at. Aliquam quis est ac magna vehicula iaculis. 
</div> 

<script> 
new Clipboard('.your-div'); 
</script>

出典

2016-12-10 16:13:32

これはjQueryプラグインではありません。すべてがjQueryプラグインではありません。 – NikxDa

あなたよ！ごめんなさい。 –

HTMLとJSでコピーボタンを作る

答えて

関連する問題