問題の要件の説明:
これは会社の内部アプリであるため、セキュリティとプライバシーに関係するアプリ内のコピーやスクリーンショットさえも許可されていません.
H5ページはアプリに埋め込まれており、コピーボタンでテキストをコピーできます!
解決:
テキストをクリップボードにコピーする js プラグインである ClipboardJS はフラッシュを使用せず、最小値はわずか 3k です
1.使い方:
npm install: npm i クリップボード --save
CDNインストール:<script src="dist/clipboard.min.js"></script>
2. DOM セレクター、HTML 要素、または HTML 要素のリストを渡して、clipboard.js インスタンスを作成します。
<div id="temp_text">私はコピーが必要なテキストです</div>
<button class="copy_btn" data-clipboard-target="#temp_text">ワンクリックでコピー</button>
var clipboard = new Clipboard('.copy_btn');
clipboard.on('成功', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('トリガー:', e.trigger);
e.clearSelection();
});
clipboard.on('エラー', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
3. その他の物件説明
data-clipboard-target: トリガー要素の data-clipboard-target 属性に含まれる値は、別の要素のセレクターと一致する必要があります
<div id="temp_text">私はコピーが必要なテキストです</div>
<button class="copy_btn" data-clipboard-target="#temp_text">ワンクリックでコピー</button>
data-clipboard-text: 必ずしも別の要素からコンテンツをコピーする必要はありません。また、トリガー要素に data-clipboard-text 属性を含めて、その属性のコンテンツをコピーすることもできます。
<button class="copy_btn" data-clipboard-text="私はコピーされたテキストです">私は自分の属性でテキストをコピーします</button>
data-clipboard-action: コンテンツをコピーするか切り取るかを指定します。値 cut は、切り取り操作を実行することを意味します。この属性を省略すると、デフォルトでコピーが使用されます
<div id="temp_text">私はコピーが必要なテキストです</div>
<button class="copy_btn" data-clipboard-target="#temp_text" data-clipboard-action="cut">一键剪切</button>