In Blazor, you can call a JavaScript method using JavaScript interop to copy the input element text to the clipboard.
In the following code, the text entered into the text box will be copied by clicking the button, and it will be displayed in the alert box.
[Index.razor]
@page "/"
@inject IJSRuntime JSRuntime
<div class="form-inline">
<input id="form-control" type="text" value="Hello World" />
<button type="button" class="btn btn-primary" @onclick="CopyTextToClipboard">Copy</button>
</div>
@code {
private async Task CopyTextToClipboard()
{
await JSRuntime.InvokeVoidAsync("copyClipboard");
}
}[_Host.cshtml]
<body>
. . .
. . .
<script>
function copyClipboard() {
/* Get the text field */
var copyText = document.getElementById("form-control");
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
</script>
</body>
Share with