ฉันกำลังพยายามใช้ไอคอนที่เมื่อคลิกจะบันทึกตัวแปรลงในคลิปบอร์ดของผู้ใช้ ขณะนี้ฉันได้ลองใช้ไลบรารีหลายแห่งและไม่มีไลบรารีใดที่สามารถทำได้
ฉันจะคัดลอกตัวแปรไปยังคลิปบอร์ดของผู้ใช้ใน Angular 5 อย่างถูกต้องได้อย่างไร
ฉันกำลังพยายามใช้ไอคอนที่เมื่อคลิกจะบันทึกตัวแปรลงในคลิปบอร์ดของผู้ใช้ ขณะนี้ฉันได้ลองใช้ไลบรารีหลายแห่งและไม่มีไลบรารีใดที่สามารถทำได้
ฉันจะคัดลอกตัวแปรไปยังคลิปบอร์ดของผู้ใช้ใน Angular 5 อย่างถูกต้องได้อย่างไร
คำตอบ:
โซลูชันที่ 1:คัดลอกข้อความใด ๆ
HTML
<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>
.ts ไฟล์
copyMessage(val: string){
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = val;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
}
โซลูชันที่ 2:คัดลอกจากกล่องข้อความ
HTML
<input type="text" value="User input Text to copy" #userinput>
<button (click)="copyInputMessage(userinput)" value="click to copy" >Copy from Textbox</button>
.ts ไฟล์
/* To copy Text from Textbox */
copyInputMessage(inputElement){
inputElement.select();
document.execCommand('copy');
inputElement.setSelectionRange(0, 0);
}
โซลูชันที่ 3:นำเข้าคำสั่งngx-clipboardของบุคคลที่สาม
<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>
โซลูชันที่ 4:คำสั่งที่กำหนดเอง
หากคุณต้องการใช้คำสั่งที่กำหนดเองให้ตรวจสอบคำตอบของ Dan Dohotaru ซึ่งเป็นโซลูชันที่หรูหราที่ใช้งานClipboardEvent
ได้
Cannot read property 'select' of undefined
ในเชิงมุม 6 นี้เข้ากันได้กับ angular6 หรือไม่?
<input *ngIf="invitation_code" type="text" readonly value="{{invitation_code}}" #userinput > <button *ngIf="code_success" (click)="copyInputMessage(userinput)" value="click to copy" > Copy code </button>
ขอบคุณ
position
, left
, และtop
opacity
และแทนที่ด้วยselBox.style.height = '0';
ฉันรู้ว่าตอนนี้ได้รับการโหวตอย่างสูงแล้วในตอนนี้ แต่ฉันควรเลือกแนวทางที่กำหนดเองและพึ่งพา ClipboardEvent ตามที่ @jockeisorby แนะนำในขณะเดียวกันก็ตรวจสอบให้แน่ใจว่าผู้ฟังถูกลบออกอย่างถูกต้อง (ต้องมีฟังก์ชันเดียวกัน สำหรับผู้ฟังเหตุการณ์ทั้งเพิ่มและลบ)
การสาธิต stackblitz
import { Directive, Input, Output, EventEmitter, HostListener } from "@angular/core";
@Directive({ selector: '[copy-clipboard]' })
export class CopyClipboardDirective {
@Input("copy-clipboard")
public payload: string;
@Output("copied")
public copied: EventEmitter<string> = new EventEmitter<string>();
@HostListener("click", ["$event"])
public onClick(event: MouseEvent): void {
event.preventDefault();
if (!this.payload)
return;
let listener = (e: ClipboardEvent) => {
let clipboard = e.clipboardData || window["clipboardData"];
clipboard.setData("text", this.payload.toString());
e.preventDefault();
this.copied.emit(this.payload);
};
document.addEventListener("copy", listener, false)
document.execCommand("copy");
document.removeEventListener("copy", listener, false);
}
}
แล้วใช้มันเป็นเช่นนั้น
<a role="button" [copy-clipboard]="'some stuff'" (copied)="notify($event)">
<i class="fa fa-clipboard"></i>
Copy
</a>
public notify(payload: string) {
// Might want to notify the user that something has been pushed to the clipboard
console.info(`'${payload}' has been copied to clipboard`);
}
หมายเหตุ: สังเกตว่าwindow["clipboardData"]
จำเป็นสำหรับ IE เนื่องจากไม่เข้าใจe.clipboardData
ฉันคิดว่านี่เป็นวิธีแก้ปัญหาที่สะอาดกว่ามากเมื่อคัดลอกข้อความ:
copyToClipboard(item) {
document.addEventListener('copy', (e: ClipboardEvent) => {
e.clipboardData.setData('text/plain', (item));
e.preventDefault();
document.removeEventListener('copy', null);
});
document.execCommand('copy');
}
จากนั้นเรียก copyToClipboard เมื่อคลิกเหตุการณ์ใน html (คลิก) = "copyToClipboard ( 'texttocopy')"
สำหรับ Angular Material v9 ตอนนี้มีคลิปบอร์ด CDK แล้ว
สามารถใช้งานได้ง่ายๆ
<button [cdkCopyToClipboard]="This goes to Clipboard">Copy this</button>
คำตอบของ 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);
}
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler
คุณสามารถทำได้โดยใช้โมดูลเชิงมุม:
navigator.clipboard.writeText('your text').then().catch(e => console.error(e));
วิธีการด้านล่างนี้สามารถใช้ในการคัดลอกข้อความ: -
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 และทำให้โค้ดง่าย ๆ คือใช้โปรเจ็กต์นี้
https://www.npmjs.com/package/ngx-clipboard
<fa-icon icon="copy" ngbTooltip="Copy to Clipboard" aria-hidden="true"
ngxClipboard [cbContent]="target value here"
(cbOnSuccess)="copied($event)"></fa-icon>
คัดลอกโดยใช้ cdk เชิงมุม
Module.ts
import {ClipboardModule} from '@angular/cdk/clipboard';
คัดลอกสตริงโดยทางโปรแกรม: MyComponent.ts,
class MyComponent {
constructor(private clipboard: Clipboard) {}
copyHeroName() {
this.clipboard.copy('Alphonso');
}
}
คลิกองค์ประกอบเพื่อคัดลอกผ่าน HTML:
<button [cdkCopyToClipboard]="longText" [cdkCopyToClipboardAttempts]="2">Copy text</button>
โซลูชันแรกที่แนะนำใช้ได้ผลเราก็ต้องเปลี่ยน
selBox.value = val;
ถึง
selBox.innerText = val;
กล่าวคือ
HTML:
<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>
.ts ไฟล์:
copyMessage(val: string){
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.innerText = val;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
}