copy-text-from-textbox-to-clipboard.md

title	description	page_title	slug	tags	res_type	component
Copy Text from TextBox to Clipboard	Learn how to copy text from the {{ site.product }} TextBox to the Clipboard.	Copy Text from {{ site.product }} TextBox to Clipboard	copy-text-from-textbox-to-clipboard	textbox, clipboard, copy, button, suffix, telerik, core, mvc, aspnet, kendo	kb	textbox

Environment

Product	{{ site.product }} 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:

1. Utilize the TextBox's [SuffixOptions()](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/textboxbuilder#suffixoptionssystemaction) configuration and define a template.
2. Within the template, create a Button component and wire to its [Click](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/buttonbuilder#eventssystemaction) event.
3. Within the event handler, use the Clipboard interface's writeText() method to copy the text from the TextBox.

{% if site.core %}

     @(Html.Kendo().TextBox()
        .Name("email")
        .Label(l => l.Content("Email Address").Floating(false))
        .Value("[email protected]")
        .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 id="buttonTemplate" type="text/html">
        <kendo-button name="copyBtn"
                      icon="copy"
                      on-click="onClick"
                      is-in-client-template="true">
        </kendo-button>
    </script>

    <kendo-textbox name="email" type="email">
        <suffix-options template-id="buttonTemplate" />
    </kendo-textbox>

{% else %}

     @(Html.Kendo().TextBox()
        .Name("email")
        .Label(l => l.Content("Email Address").Floating(false))
        .Value("[email protected]")
        .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" })
    )

{% endif %}

    <script>
        function onClick(e){
            var textBoxValue = $("#email").getKendoTextBox().value();
            navigator.clipboard.writeText(textBoxValue);
        }
    </script>    

{% if site.core %} To see an extended example of the aforementioned approach, refer to the following Telerik REPL example:

• Telerik REPL for ASP.NET Core HtmlHelper Example
• Telerik REPL for ASP.NET Core TagHelper Example

{% else %} To see an extended example of the aforementioned approach, refer to the REPL example on copying text from the TextBox within the Clipboard. {% endif %}

More {{ site.framework }} TextBox Resources

• [{{ site.framework }} TextBox Documentation]({%slug htmlhelpers_overview_textbox %})

• [{{ site.framework }} TextBox Demos](https://demos.telerik.com/{{ site.platform }}/textbox/index)

{% if site.core %}

• {{ site.framework }} TextBox Product Page

• [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})

• Telerik UI for {{ site.framework }} Forums

{% else %}

• {{ site.framework }} TextBox Product Page

• [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})

• Telerik UI for {{ site.framework }} Forums {% endif %}

See Also

• Telerik REPL (HtmlHelper): Copy Text from TextBox to Clipboard {% if site.core %}
• Telerik REPL (TagHelper): Copy Text from TextBox to Clipboard {% endif %}
• Client-Side API Reference of the TextBox for {{ site.framework }}
• [Server-Side API Reference of the TextBox for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/textbox) {% if site.core %}
• TagHelper API Reference of the TextBox for {{ site.framework }} {% endif %}
• [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
• [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)