BlazorVirtualKeyboard 1.0.2
dotnet add package BlazorVirtualKeyboard --version 1.0.2
NuGet\Install-Package BlazorVirtualKeyboard -Version 1.0.2
<PackageReference Include="BlazorVirtualKeyboard" Version="1.0.2" />
paket add BlazorVirtualKeyboard --version 1.0.2
#r "nuget: BlazorVirtualKeyboard, 1.0.2"
// Install BlazorVirtualKeyboard as a Cake Addin #addin nuget:?package=BlazorVirtualKeyboard&version=1.0.2 // Install BlazorVirtualKeyboard as a Cake Tool #tool nuget:?package=BlazorVirtualKeyboard&version=1.0.2
Currently only supports Blazor Webassembly on .NET 8 - support for Blazor Server is progressing.
NOTE: This is simply a proof of concept/prototype, and therefore does not support all use cases. As JavaScript and Blazor has to notify each other of changes and such, I have created Blazor components called FormVirtualKeyboard.razor and InputVirtualKeyboard.razor which are the only components that support integration of this keyboard.
I have tried to minimize the amount of JavaScript in the implementation of this virtual keyboard / on-screen keyboard component. This has resulted in some use cases not being supported, and some atypical conventions in the code. Only minimum refactoring has been done as of now, which might be why there can (will) be code smells and minor bugs.
TBD:
Keyboard customization
INSTALLATION
Install this NuGet package in your Blazor Webassembly project on .NET 8.
Add the following lines to your program.cs:
builder.Services.AddHttpClient();
builder.Services.AddScoped<BlazorVirtualKeyboard.Services.VirtualKeyboardService>();
Add
@using BlazorVirtualKeyboard
to your _Imports.razor file.
Add the following lines to your index.html:
<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) Add the following line to index.html if you want icons for the function buttons:
<script src="https://kit.fontawesome.com/be5149d719.js" crossorigin="anonymous"></script>
USAGE
As mentioned, the use cases might differ from other on-screen keyboard projects since the goal of this projects was to use as little JavaScript as possible. To use the keyboard, put
<div>
<div>
...
</div>
<BlazorVirtualKeyboard.Keyboards.VirtualKeyboard />
</div>
In your MainLayout.razor, this is the only instance of VirtualKeyboard that is necessary, as it is merely hidden and listens for focus events on the custom components that support it. Here is an example of how to combine FormVirtualKeyboard and InputVirtualKeyboard for submitting data using the keyboard:
<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; }
}
}
It is also possible to just use InputVirtualKeyboard if you do not wish to submit any data:
<BlazorVirtualKeyboard.Components.InputVirtualkeyboard Placeholder="test" Id="test" Type="text"/>
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net8.0
- Microsoft.AspNetCore.Components (>= 8.0.6)
- Microsoft.AspNetCore.Components.Web (>= 8.0.6)
- Microsoft.Extensions.Http (>= 8.0.0)
- Serilog.Sinks.BrowserConsole (>= 2.0.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.