BlazorFiddle - Blazor .Net Developer Playground and Code Editor in the Browser.

Index

@page "/"
@inject IJSRuntime jsr;

<h1>Hello, world!</h1>

Welcome to your new app.

<input @bind="BoundReal" @bind:event="oninput" @ref="elem"/>

<pre>
This sample textbox changes the letter "a" to a period "." as you type (successfully).
This sample also tries to prevent the letter "x" from registering (fails).
To reproduce, type abxa in the text field, the result should be

typed         should see    actually see
=======       ===========   ===========
a             .             .
ab            .b            .b
abx           .b            .bx    /// the letter x should be filtered out
abxa          .b.           .b.  

This is similar to an issue I used to have with react.

In addition, the midstream text editing has a problem when trying to "get involved" in the input per keypress.
If you type in a string, then move the cursor to the middle and try to edit, the cursor WARPS to the end of the input.
This is similar to what is described here https://stackoverflow.com/a/49648061

- type "blazor" into the text field (should see bl.zor)
- then place the cursor before the "o" and type some more o's "oooo"
- the cursor will jump to the end of the input



</pre>

@code {
    private string real = "";
    private object elem;

    string BoundReal
    {
        get => real;
        set {
            var orig = value;
            Console.WriteLine($"set BoundReal - {value.ToString()}");
            value = value.Replace("a", ".");
            value = value.Replace("x", "");
            real = value;
            Console.WriteLine($"              - {real}");

            var jsp = (IJSInProcessRuntime)jsr;
            var caret = jsp.Invoke<int>("window.fixJumpCursor_GetCaret", elem);
            caret = (caret - (orig.Length - value.Length));
            jsp.InvokeVoid("window.fixJumpCursor_SetCaret", elem, caret);
        }
    }
}

namespace BlazorFiddleProject
{
    using Microsoft.AspNetCore.Components.Builder;
    using Microsoft.Extensions.DependencyInjection;


    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent<App>("app");
        }
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>BlazorFiddleProject</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	
	<script src="_content/MatBlazor/dist/matBlazor.js"></script>

    <style>
        app { }
    </style>

    <script type="text/javascript">
    </script>
</head>
<body>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script>
        window.fixJumpCursor_SetCaret = function (element, caret) {
            window.requestAnimationFrame(() => {
                element.selectionStart = caret;
                element.selectionEnd = caret;
            })
        };

        window.fixJumpCursor_GetCaret = function (element) {
            var caret = element.selectionStart;
            return caret;
        };
</script>

</body>
</html>

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.