我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。
在Angular 5中,如何正确地将一个变量复制到用户的剪贴板中?
我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。
在Angular 5中,如何正确地将一个变量复制到用户的剪贴板中?
当前回答
修改版本的jockeisorby的回答,修复事件处理程序没有被正确删除。
copyToClipboard(item): void {
let listener = (e: ClipboardEvent) => {
e.clipboardData.setData('text/plain', (item));
e.preventDefault();
};
document.addEventListener('copy', listener);
document.execCommand('copy');
document.removeEventListener('copy', listener);
}
其他回答
用纯Angular和ViewChild为自己找到了最简单的解决方案。
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'cbtest',
template: `
<input type="text" #inp/>
<input type="button" (click)="copy ()" value="copy now"/>`
})
export class CbTestComponent
{
@ViewChild ("inp") inp : any;
copy ()
{
// this.inp.nativeElement.value = "blabla"; // you can set a value manually too
this.inp.nativeElement.select (); // select
document.execCommand ("copy"); // copy
this.inp.nativeElement.blur (); // unselect
}
}
我认为在复制文本时,这是一个更干净的解决方案:
copyToClipboard(item) {
document.addEventListener('copy', (e: ClipboardEvent) => {
e.clipboardData.setData('text/plain', (item));
e.preventDefault();
document.removeEventListener('copy', null);
});
document.execCommand('copy');
}
然后在html中的click事件上调用copyToClipboard。(点击)= " copyToClipboard (texttocopy)”。
以下方法可用于复制消息:-
export function copyTextAreaToClipBoard(message: string) {
const cleanText = message.replace(/<\/?[^>]+(>|$)/g, '');
const x = document.createElement('TEXTAREA') as HTMLTextAreaElement;
x.value = cleanText;
document.body.appendChild(x);
x.select();
document.execCommand('copy');
document.body.removeChild(x);
}
使用angular cdk复制,
Module.ts
import {ClipboardModule} from '@angular/cdk/clipboard';
以编程方式复制一个字符串:
class MyComponent {
constructor(private clipboard: Clipboard) {}
copyHeroName() {
this.clipboard.copy('Alphonso');
}
}
点击一个元素通过HTML复制:
<button [cdkCopyToClipboard]="longText" [cdkCopyToClipboardAttempts]="2">Copy text</button>
参考: https://material.angular.io/cdk/clipboard/overview
// for copy the text
import { Clipboard } from "@angular/cdk/clipboard"; // first import this in .ts
constructor(
public clipboard: Clipboard
) { }
<button class="btn btn-success btn-block"(click) = "onCopy('some text')" > Copy< /button>
onCopy(value) {
this.clipboard.copy(value);
}
// for paste the copied text on button click :here is code
<button class="btn btn-success btn-block"(click) = "onpaste()" > Paste < /button>
onpaste() {
navigator['clipboard'].readText().then(clipText => {
console.log(clipText);
});
}