Copy Text from TextBox to Clipboard
Environment
| Product | Telerik UI for ASP.NET MVC TextBox |
| Product Version | 2024.1.130 |
Description
How can I copy text from the TextBox component directly within the Clipboard?
Solution
To achieve the desired result:
- Utilize the TextBox's
SuffixOptions()configuration and define a template. - Within the template, create a Button component and wire to its
Clickevent. - Within the event handler, use the Clipboard interface's
writeText()method to copy the text from the TextBox.
@(Html.Kendo().TextBox()
.Name("email")
.Label(l => l.Content("Email Address").Floating(false))
.Value("test@mail.com")
.SuffixOptions(suffix => suffix
.Template(Html.Kendo().Template()
.AddComponent(component => component
.Button()
.Name("copyBtn")
.Icon("copy")
.Events(events => events.Click("onClick"))
)
)
)
.HtmlAttributes(new { style = "width: 100%;", type = "email" })
)
<script>
function onClick(e){
var textBoxValue = $("#email").getKendoTextBox().value();
navigator.clipboard.writeText(textBoxValue);
}
</script>
To see an extended example of the aforementioned approach, refer to the REPL example on copying text from the TextBox within the Clipboard.