Merge new-kb-inputs-disable-copy-paste-0d4b5ce49e56413e8e3b628f5aacd23d-2540 into production (#2573)

* Added new kb article inputs-disable-copy-paste

* Update knowledge-base/inputs-disable-copy-paste.md

* Update knowledge-base/inputs-disable-copy-paste.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update knowledge-base/inputs-disable-copy-paste.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update knowledge-base/inputs-disable-copy-paste.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update knowledge-base/inputs-disable-copy-paste.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update knowledge-base/inputs-disable-copy-paste.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update knowledge-base/inputs-disable-copy-paste.md

Co-authored-by: Dimo Dimov <[email protected]>

---------

Co-authored-by: KB Bot <[email protected]>
Co-authored-by: Nadezhda Tacheva <[email protected]>
Co-authored-by: Dimo Dimov <[email protected]>

Author: 4 people

knowledge-base/inputs-disable-copy-paste.md

@@ -0,0 +1,91 @@
+---
+title: Disable Copy and Paste in Telerik Blazor Inputs
+description: A guide that shows how to prevent users from copying and pasting text into the Telerik Blazor Inputs in a Blazor application.
+type: how-to
+page_title: How to Prevent Copy and Paste Actions in Telerik Blazor Inputs
+slug: inputs-kb-disable-copy-paste
+tags: autocomplete, combobox, datepicker, daterangepicker, datetimepicker, multicolumncombobox, numerictextbox,   textbox, textarea, timepicker, blazor, copy, paste
+res_type: kb
+ticketid: 1670453
+---
+
+## Environment
+
+<table>
+<tbody>
+<tr>
+<td>Product</td>
+            <td>
+                AutoComplete for Blazor,<br />
+                ComboBox for Blazor,<br />
+                DatePicker for Blazor,<br />
+                DateRangePicker for Blazor,<br />
+                DateTimePicker for Blazor,<br />
+                MultiColumnComboBox for Blazor,<br />
+                NumericTextBox for Blazor,<br />
+                TextArea for Blazor,<br />
+                TextBox for Blazor,<br />
+                TimePicker for Blazor
+            </td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+This KB article answers the following questions:
+- How can I prevent users from pasting text into a TextBox?
+- What is the method to disable the copy and paste actions in a NumericTextBox?
+- Can I use JavaScript Interop to control copy and paste in the Telerik ComboBox for Blazor?
+
+## Solution
+
+To disable the copy and paste functionality in a TextBox and other Telerik Blazor inputs, follow the steps below:
+
+1. Add a custom CSS class to the component to ensure you are targeting this specific instance. 
+
+2. Create a JavaScript function that targets the input of your component and prevents the default `oncopy` and `onpaste` events.
+
+3. Use JS Interop to invoke the JavaScript function during the `OnAfterRenderAsync` lifecycle method. It fires when the DOM tree is built, but before the HTML output is actually rendered in the browser. This makes it the most appropriate place to listen to and prevent the `oncopy` and `onpaste` events.
+
+````CSHTML
+@inject IJSRuntime js
+
+<TelerikTextBox @bind-Value="@TBValue"
+                Width="300px"
+                Class="no-copy-paste" />
+
+@* Move JavaScript code to a separate JS file in production *@
+<script suppress-error="BL9992">
+    function preventCutCopyPaste() {
+        var input = document.querySelector(".no-copy-paste input");
+
+        if (input) {
+            input.oncopy = e => e.preventDefault();
+            input.onpaste = e => e.preventDefault();
+        }
+    }
+</script>
+
+@code {
+    private string TBValue { get; set; }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // ensure the HTML is rendered in the browser
+            await Task.Delay(1);
+
+            // prevent copy and paste in the textbox
+            await js.InvokeVoidAsync("preventCutCopyPaste");
+        }
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+}
+````
+
+## See Also
+
+- [Using JavaScript Interop in Blazor](https://docs.microsoft.com/aspnet/core/blazor/javascript-interop)