BlazorVirtualKeyboard 1.0.2

Blazor On-Screen Virtual Keyboard

A lightweight on-screen keyboard for Blazor WebAssembly (.NET 8) with minimal JavaScript dependencies.
Supports multiple languages, numeric keypad (numpad) for number inputs, and customizable layouts.

🚀 Current Status:
Blazor WebAssembly is fully supported. Blazor Server support is in progress.

⚠ Note: This is a prototype and may not support all use cases. Due to the interaction between Blazor and JavaScript, only the components FormVirtualKeyboard.razor and InputVirtualKeyboard.razor currently support this keyboard.

✨ Features

✔ On-screen virtual keyboard for Blazor WebAssembly
✔ Supports multiple languages (English, Danish, and more planned)
✔ Numeric keypad (numpad) support for `<InputVirtualkeyboard Id="number" Type="number/> fields
✔ Includes special characters (€, @, %, &, etc.)
✔ Customizable keyboard layouts (QWERTY, AZERTY, DVORAK – planned)
✔ Minimal JavaScript usage for better Blazor integration
✔ Automatic focus detection – The keyboard activates when an input field is focused

📸 Screenshots

Alphabetic Layout:

Special Characters:

Numpad:

📦 Installation

Install the NuGet package in your Blazor WebAssembly project (.NET 8):

dotnet add package BlazorVirtualKeyboard

1️⃣ Update Program.cs

Add the following services:

builder.Services.AddHttpClient(); 
builder.Services.AddScoped<BlazorVirtualKeyboard.Services.VirtualKeyboardService>();

2️⃣ Add Namespace

In _Imports.razor, add:

@using BlazorVirtualKeyboard 

3️⃣ Add Scripts in index.html

Ensure the following scripts are included:

<script src="_content/BlazorVirtualKeyboard/Components/InputVirtualKeyboard.razor.js"></script> 
<script src="_content/BlazorVirtualKeyboard/Components/FormVirtualKeyboard.razor.js"></script> 
<script src="_content/BlazorVirtualKeyboard/Keyboards/VirtualKeyboard.razor.js"></script>

(Optional, but recommended) If you want function button icons, include:

<script src="https://kit.fontawesome.com/be5149d719.js" crossorigin="anonymous"></script>

🚀 Usage

Basic Setup

To enable the keyboard globally, add it once in MainLayout.razor:

<div>
    <BlazorVirtualKeyboard.Keyboards.VirtualKeyboard />
</div>

The keyboard remains hidden until a compatible input field is focused.

Form Example (Login)

Here’s how to integrate it into a form:

<FormVirtualKeyboard FormAction="Login" FormId="loginForm" FormClass="login-form row-1 test-form" EditContext="loginEditContext">
    <h5>Login</h5>
    <div class="input">
        <label for="username" />
        <InputVirtualKeyboard @bind-InputValue="LoginModelInstance.Username"
                              Id="username" Type="text" Placeholder="Username" />

        <label for="password" />
        <InputVirtualKeyboard @bind-InputValue="LoginModelInstance.Password"
                              Id="password" Type="password" Placeholder="Password" />
    </div>
    <div class="action">
        <button type="submit" class="bluebtn">
            Login
        </button>
    </div>
</FormVirtualKeyboard>

@code {
    public LoginModel? LoginModelInstance = new LoginModel();
    private EditContext? loginEditContext;

    protected override async Task OnInitializedAsync()
    {
        loginEditContext = new EditContext(LoginModelInstance);
    }

    private void Login()
    {
        if (loginEditContext.Validate())
        {
            Log.Information($"User: {LoginModelInstance?.Username}, Password: {LoginModelInstance?.Password}");
        }
    }

    public class LoginModel
    {
        [Required]
        [MinLength(3, ErrorMessage = "Username is too short.")]
        public string? Username { get; set; }

        [Required]
        [MinLength(3, ErrorMessage = "Password is too short.")]
        public string? Password { get; set; }
    }
}

Numeric Keypad Example

For <input type="number">, you can enable the numpad:

<InputVirtualKeyboard Placeholder="Enter a number" Id="numInput" Type="number"/>

Standalone Input Field

If you just need an input with the virtual keyboard:

<InputVirtualKeyboard Placeholder="Type here" Id="test" Type="text"/>

🔜 Planned Features

• ✅ Blazor Server support (in progress)
• 🎨 Customizable layouts (QWERTY, AZERTY, DVORAK, etc.)
• 🌍 More language support (user-configurable layouts)
• 🔢 Expanded numpad functionality (arithmetic operations, decimal input)
• 🖍 Theme customization (light/dark mode, colors, CSS variables)
• 🎹 Custom keyboard mappings (for specialized applications)

🛠 Troubleshooting

• Keyboard not appearing? Make sure you included the required scripts in index.html.
• Keyboard not closing? Ensure you don’t have conflicting JavaScript handling focus events.
• Blazor Server not working? Server support is still in development.

📄 License

This project is licensed under the MIT License.

🤝 Contributing

Feel free to report issues, suggest features, or submit pull requests! Contributions are welcome. 🚀