Select text in span element and copy to clipboard

Question

So I have the following html:

<label class="form-group" i18n>Send us your email:</label> <span (click)="select_email()" id="select_email">XYI.runme@previews.emailaddress.com</span>

and the following method in my *.component.ts file:

select_email() {
    var select_email = <HTMLSpanElement> document.getElementById('select_email');

    select_email.select();

    var successful = document.execCommand('copy');

    console.log("copy to clipboard was successful? " + successful);
}

However, when it tries to compile, I get the error message that .select() does not exist on HTMLSpanElement. I have tried forcing the type to HTMLElement as well and I get the same results.

Is there a way to select the text inside the span element using Angular/typescript? I am not allowed to use jQuery, so only pure javascript/typescript is allowed.

You can try the method suggested in [this answer](https://stackoverflow.com/a/33547949/1009922). — ConnorsFan, Nov 21 '17 at 22:12

score 0 · Answer 1 · answered Nov 21 '17 at 22:10

0

.select() only exists on an HTMLInputElement. You could swap out your span for a readonly input element

<input readonly id="select_email" (click)="select_email()" value="XYI.runme@previews.emailaddress.com">

select_email() {
    var select_email = <HTMLInputElement>document.getElementById('select_email');
    select_email.select();

    var successful = document.execCommand('copy');
}

answered Nov 21 '17 at 22:10

LLai

13,128
3
41
45

but giving the input a width would be a problem :/ – LLai Nov 21 '17 at 22:20

Select text in span element and copy to clipboard

1 Answers1