New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

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 Click event.
Within the event handler, use the Clipboard interface's writeText() method to copy the text from the TextBox.

Index.cshtml
     @(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.js
    <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.

Copy Text from TextBox to Clipboard

Environment

Description

Solution

More ASP.NET MVC TextBox Resources

See Also