From f98c5c80403986f9dd1d5b85614999fd0483a3f5 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Tue, 19 Nov 2024 12:31:02 +0000 Subject: [PATCH 1/8] Added new kb article inputs-disable-copy-paste --- knowledge-base/inputs-disable-copy-paste.md | 88 +++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 knowledge-base/inputs-disable-copy-paste.md diff --git a/knowledge-base/inputs-disable-copy-paste.md b/knowledge-base/inputs-disable-copy-paste.md new file mode 100644 index 0000000000..a4599cfa6d --- /dev/null +++ b/knowledge-base/inputs-disable-copy-paste.md @@ -0,0 +1,88 @@ +--- +title: Disabling Copy and Paste in Telerik Blazor Inputs +description: A guide on preventing 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 + + + + + + + + +
Product + AutoComplete for Blazor,
+ ComboBox for Blazor,
+ DatePicker for Blazor,
+ DateRangePicker for Blazor,
+ DateTimePicker for Blazor,
+ MultiColumnComboBox for Blazor,
+ NumericTextBox for Blazor,
+ TextArea for Blazor,
+ TextBox for Blazor,
+ TimePicker for Blazor +
+ +## 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 action in a NumericTextBox? +- Can I use JavaScript Interop to control copy and paste in 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 + + + +@* Move JavaScript code to a separate JS file in production *@ + + +@code { + private string TBValue { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await Task.Delay(1); + + // prevent cut, 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) From 7565bcfc71feba650b9968ddf7ecbe5a94b86ef9 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 19 Nov 2024 14:35:10 +0200 Subject: [PATCH 2/8] Update knowledge-base/inputs-disable-copy-paste.md --- knowledge-base/inputs-disable-copy-paste.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/inputs-disable-copy-paste.md b/knowledge-base/inputs-disable-copy-paste.md index a4599cfa6d..3f1f4c4959 100644 --- a/knowledge-base/inputs-disable-copy-paste.md +++ b/knowledge-base/inputs-disable-copy-paste.md @@ -74,7 +74,7 @@ To disable the copy and paste functionality in a TextBox and other Telerik Blazo { await Task.Delay(1); - // prevent cut, copy and paste in the textbox + // prevent copy and paste in the textbox await js.InvokeVoidAsync("preventCutCopyPaste"); } From 12a47d44ebad78b764a540f750d28ca645d0e345 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 26 Nov 2024 18:37:17 +0200 Subject: [PATCH 3/8] Update knowledge-base/inputs-disable-copy-paste.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/inputs-disable-copy-paste.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/inputs-disable-copy-paste.md b/knowledge-base/inputs-disable-copy-paste.md index 3f1f4c4959..9fcab2373a 100644 --- a/knowledge-base/inputs-disable-copy-paste.md +++ b/knowledge-base/inputs-disable-copy-paste.md @@ -1,5 +1,5 @@ --- -title: Disabling Copy and Paste in Telerik Blazor Inputs +title: Disable Copy and Paste in Telerik Blazor Inputs description: A guide on preventing 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 From cd4487c36c2f65cff64eb87c0a91f48c2076a29d Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 26 Nov 2024 18:37:39 +0200 Subject: [PATCH 4/8] Update knowledge-base/inputs-disable-copy-paste.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/inputs-disable-copy-paste.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/inputs-disable-copy-paste.md b/knowledge-base/inputs-disable-copy-paste.md index 9fcab2373a..8cb4276b0f 100644 --- a/knowledge-base/inputs-disable-copy-paste.md +++ b/knowledge-base/inputs-disable-copy-paste.md @@ -1,6 +1,6 @@ --- title: Disable Copy and Paste in Telerik Blazor Inputs -description: A guide on preventing users from copying and pasting text into the Telerik Blazor Inputs in a Blazor application. +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 From fceb3a3d527fcb71b543157e658336a6120ef77f Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 26 Nov 2024 18:37:47 +0200 Subject: [PATCH 5/8] Update knowledge-base/inputs-disable-copy-paste.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/inputs-disable-copy-paste.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/inputs-disable-copy-paste.md b/knowledge-base/inputs-disable-copy-paste.md index 8cb4276b0f..fc5f056098 100644 --- a/knowledge-base/inputs-disable-copy-paste.md +++ b/knowledge-base/inputs-disable-copy-paste.md @@ -36,7 +36,7 @@ ticketid: 1670453 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 action in a NumericTextBox? -- Can I use JavaScript Interop to control copy and paste in ComboBox for Blazor? +- Can I use JavaScript Interop to control copy and paste in the Telerik ComboBox for Blazor? ## Solution From 657d8eb43d05b87a4d41be9f5f38ae235d503c9a Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 26 Nov 2024 18:38:48 +0200 Subject: [PATCH 6/8] Update knowledge-base/inputs-disable-copy-paste.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/inputs-disable-copy-paste.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/knowledge-base/inputs-disable-copy-paste.md b/knowledge-base/inputs-disable-copy-paste.md index fc5f056098..4b99a7f4c3 100644 --- a/knowledge-base/inputs-disable-copy-paste.md +++ b/knowledge-base/inputs-disable-copy-paste.md @@ -58,10 +58,12 @@ To disable the copy and paste functionality in a TextBox and other Telerik Blazo @* Move JavaScript code to a separate JS file in production *@ From 850da0d91436cdbfe0475ff034cafc9b44b44cf7 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 26 Nov 2024 18:39:00 +0200 Subject: [PATCH 7/8] Update knowledge-base/inputs-disable-copy-paste.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/inputs-disable-copy-paste.md | 1 + 1 file changed, 1 insertion(+) diff --git a/knowledge-base/inputs-disable-copy-paste.md b/knowledge-base/inputs-disable-copy-paste.md index 4b99a7f4c3..d8ad4cd048 100644 --- a/knowledge-base/inputs-disable-copy-paste.md +++ b/knowledge-base/inputs-disable-copy-paste.md @@ -74,6 +74,7 @@ To disable the copy and paste functionality in a TextBox and other Telerik Blazo { if (firstRender) { + // ensure the HTML is rendered in the browser await Task.Delay(1); // prevent copy and paste in the textbox From 5e57b059982cd17425a1cd76244ead8207cfde00 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 26 Nov 2024 18:39:08 +0200 Subject: [PATCH 8/8] Update knowledge-base/inputs-disable-copy-paste.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/inputs-disable-copy-paste.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/inputs-disable-copy-paste.md b/knowledge-base/inputs-disable-copy-paste.md index d8ad4cd048..fb1cd135dc 100644 --- a/knowledge-base/inputs-disable-copy-paste.md +++ b/knowledge-base/inputs-disable-copy-paste.md @@ -35,7 +35,7 @@ ticketid: 1670453 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 action in a NumericTextBox? +- 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