New to Telerik UI for Blazor? Start a free 30-day trial
Editor Focus Event
Updated on Jan 27, 2026
Environment
| Product | Editor for Blazor |
Description
This KB article answers the following questions:
- How to detect when the user focuses the Editor content?
- How to handle the Editor focus event?
- Is it possible to do a Blazor action on Editor OnFocus?
Solution
The required approach depends on the Editor EditMode, due to the different Editor HTML rendering:
Div EditMode
- Learn how to call JavaScript code from C# code.
- Wrap the Editor in a container with an
@onfocusinevent. - Use JavaScript to check if the Editor content
<div class="k-content ProseMirror">is focused.
Detect Editor focus when using Div EditMode
@using Telerik.Blazor.Components.Editor
@inject IJSRuntime js
<div @onfocusin="@OnDivEditorFocus">
<TelerikEditor @bind-Value="@EditorValue"
Tools="@EditorToolSets.All"
EditMode="@EditorEditMode.Div"
Height="300px">
</TelerikEditor>
</div>
@* Move JavaScript code to a separate JS file *@
<script suppress-error="BL9992">
function isEditorDivFocused() {
return document.activeElement &&
document.activeElement.classList.contains("k-content") &&
document.activeElement.classList.contains("ProseMirror");
}
</script>
@code {
#nullable enable
private string EditorValue { get; set; } = @"<p>foo 1</p><p>bar 1</p>";
private async Task OnDivEditorFocus()
{
bool isEditorContentFocused = await js.InvokeAsync<bool>("isEditorDivFocused");
if (isEditorContentFocused)
{
EditorValue = $"<p>Editor content DIV was focused at {DateTime.Now.ToLongTimeString()}.</p>";
}
}
}
Iframe EditMode
- Learn how to call C# code from JavaScript code and vice-versa.
- Use the first firing of
OnAfterRenderAsyncto:- Obtain the
<body>element inside the Editor contentiframe. - Subscribe to the
focusinevent to theiframebody.
- Obtain the
- In the JavaScript
focusinhandler, call a C# method.
Detect Editor focus when using Iframe EditMode
@using Telerik.Blazor.Components.Editor
@implements IDisposable
@inject IJSRuntime js
<TelerikEditor @bind-Value="@EditorValue"
Tools="@EditorToolSets.All"
Id="@EditorId"
Height="300px">
</TelerikEditor>
@* Move JavaScript code to a separate JS file *@
<script suppress-error="BL9992">
var dotNet;
function attachIframeFocusHandler(id, dotNetRef) {
var editor = document.getElementById(id);
if (editor) {
dotNet = dotNetRef;
editor.querySelector("iframe").contentWindow.document.body.addEventListener("focusin", OnEditorBodyFocus);
}
}
function OnEditorBodyFocus(args) {
dotNet.invokeMethodAsync("OnEditorFocus2");
}
function detachIframeFocusHandler(id) {
var editor = document.getElementById(id);
if (editor) {
editor.querySelector("iframe").contentWindow.document.body.removeEventListener("focusin", OnEditorBodyFocus);
}
}
</script>
@code {
#nullable enable
private string EditorValue { get; set; } = @"<p>foo 2</p><p>bar 2</p>";
private const string EditorId = "iframe-editor";
// Replace __Main with your Razor component type
private DotNetObjectReference<Home>? DotNetRef { get; set; }
[JSInvokable("OnEditorFocus2")]
public void OnEditorFocus2()
{
EditorValue = $"<p>Editor content IFRAME was focused at {DateTime.Now.ToLongTimeString()}.</p>";
StateHasChanged();
}
protected override void OnInitialized()
{
DotNetRef = DotNetObjectReference.Create(this);
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await Task.Delay(1); // wait for HTML to render
await js.InvokeVoidAsync("attachIframeFocusHandler", EditorId, DotNetRef);
}
await base.OnAfterRenderAsync(firstRender);
}
public void Dispose()
{
DotNetRef?.Dispose();
}
}