Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件
1. 运行截图
2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件
2.1 常规操作,懒加载js库, 😃
export function addScript(url) {
let scriptsIncluded = false;
let scriptTags = document.querySelectorAll('head > script');
scriptTags.forEach(scriptTag => {
if (scriptTag) {
let srcAttribute = scriptTag.getAttribute('src');
if (srcAttribute && srcAttribute.startsWith(url)) {
scriptsIncluded = true;
return true;
}
}
});
if (scriptsIncluded) { //Prevent adding JS scripts to page multiple times.
//if (window.KioskBoard)
return true;
}
let script = document.createElement('script');
script.src = url;
document.head.appendChild(script);
return false;
}
export function init(className, option) {
console.info(className, option);
KioskBoard.run('.' + className, option);
return true;
}
2.2 打开项目源码下载复制相关键盘配置json: kioskboard-keys-*.json ,库文件: kioskboard-aio-2.1.0.min.js 放到wwwroot/lib/kioskboard文件夹
kioskboard-aio-2.1.0.min.js
kioskboard-keys-*.json
3. 打开Components文件夹 , 新建三个文件
3.1 KeyboardOption 键盘配置类
KeyboardOption.cs代码
using System.Text.Json.Serialization;
namespace Blazor100.Components
{
/// <summary>
/// 键盘语言布局
/// </summary>
public enum KeyboardKeysType
{
arabic,
english,
french,
german,
hungarian,
persian,
russian,
spanish,
turkish
}
/// <summary>
/// 键盘类型,全键盘 || 字母 || 小数字键盘
/// </summary>
public enum KeyboardType
{
all,
keyboard,
numpad,
}
/// <summary>
/// 对齐, 顶端 || 底部
/// </summary>
public enum KeyboardPlacement
{
bottom,
top
}
/// <summary>
/// 特殊符号键盘类型, 默认 || 欧洲 || 自定义
/// </summary>
public enum KeyboardSpecialcharacters
{
all,
europe,
customer
}
/// <summary>
/// 键盘主题
/// </summary>
public enum KeyboardTheme
{
light,
dark,
flat,
material,
oldschool
}
/// <summary>
/// 打开或关闭键盘的 CSS 动画样式
/// </summary>
public enum KeyboardCssAnimationsStyle
{
slide,
fade,
flat,
material,
oldschool
}
public class KeyboardOption
{
/// <summary>
/// 必需:必须为自定义键定义一个对象数组。<para></para>
/// 提示：每个对象在键盘上创建一个行元素 (HTML)。<para></para>
/// 例如 [{"key":"value"}, {"key":"value"}] => [{"0":"A","1":"B","2":"C" }, {"0":"D","1":"E","2":"F"}]
/// </summary>
public List<Dictionary<string, string>>? keysArrayOfObjects { get; set; } = null;
/// <summary>
/// 键盘类型 <para></para>
/// arabic || english || french || german || hungarian || persian || russian || spanish || turkish
/// <para></para>仅当“keysArrayOfObjects”为“null”时才需要设置
/// </summary>
[JsonIgnore]
public KeyboardKeysType KeyboardKeysType { get; set; } = KeyboardKeysType.english;
/// <summary>
/// 仅当“keysArrayOfObjects”为“null”时才需要。<para></para>
/// “kioskboard-keys-${langugage}.json”文件的路径必须设置为“keysJsonUrl”选项。（XMLHttpRequest 从 JSON 文件中获取密钥。）<para></para>
/// 例如 '/Content/Plugins/KioskBoard/dist/kioskboard-keys-english.json'
/// </summary>
public string? keysJsonUrl { get => keysArrayOfObjects == null ? $"./lib/kioskboard/kioskboard-keys-{KeyboardKeysType}.json" : null; }
/// <summary>
/// 特殊符号键盘类型, 默认 || 欧洲 || 自定义
/// </summary>
[JsonIgnore]
public KeyboardSpecialcharacters KeyboardSpecialcharacters { get; set; } = KeyboardSpecialcharacters.all;
/// <summary>
/// 自定义特殊符号键盘 , 字符串数组覆盖内置的特殊字符。<para></para>
/// 例如 ["#", "€", "%", "+", "-", "*"]
/// </summary>
[JsonIgnore]
public string[]? CustomerKeyboardSpecialcharacters { get; set; }
string[] KeyboardSpecialcharactersEurope { get; set; } = { "#", "€", "Ñ" };
/// <summary>
/// 可选：自定义特殊符号键盘
/// </summary>
public string[]? keysSpecialCharsArrayOfStrings
{
get =>
CustomerKeyboardSpecialcharacters != null ?
CustomerKeyboardSpecialcharacters :
KeyboardSpecialcharacters == KeyboardSpecialcharacters.europe ?
KeyboardSpecialcharactersEurope :
null;
}
/// <summary>
/// 可选：可以设置一个数字数组来覆盖内置的小键盘键。（从 0 到 9，顺序不限。）
/// 例如 [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
/// </summary>
public string? keysNumpadArrayOfNumbers { get; set; } = null;
/// <summary>
///可选：自定义键的语言代码 (ISO 639-1)（用于语言支持）
///<para></para> 例如 "de" || "en" || "fr" || "hu" || "tr" 等...
/// </summary>
public string language { get; set; } = "en";
/// <summary>
/// 键盘主题 <para></para> "light" || "dark" || "flat" || "material" || "oldschool"
/// </summary>
[JsonIgnore]
public KeyboardTheme Theme { get; set; } = KeyboardTheme.light;
public string theme { get => Theme.ToString(); }
/// <summary>
/// 大写或小写锁定。默认false小写
/// </summary>
public bool capsLockActive { get; set; } = false;
/// <summary>
/// 允许或阻止真实/物理键盘的使用。“false”时被阻止<para></para>
/// 此外，如果想要使用真实/物理键盘，“allowMobileKeyboard”选项也必须为“true”。
/// </summary>
public bool allowRealKeyboard { get; set; } = true;
/// <summary>
/// 允许或阻止使用移动键盘。当 "false"
/// </summary>
public bool allowMobileKeyboard { get; set; } = true;
/// <summary>
/// 打开或关闭键盘的 CSS 动画
/// </summary>
public bool cssAnimations { get; set; } = true;
/// <summary>
/// CSS 动画持续时间为毫秒
/// </summary>
public int cssAnimationsDuration { get; set; } = 360;
/// <summary>
/// 打开或关闭键盘的 CSS 动画样式 => "slide" || "fade"
/// </summary>
[JsonIgnore]
public KeyboardCssAnimationsStyle CssAnimationsStyle { get; set; } = KeyboardCssAnimationsStyle.slide;
public string cssAnimationsStyle { get => CssAnimationsStyle.ToString(); }
/// <summary>
/// 启用或禁用键盘上的空格键功能。
/// </summary>
public bool keysAllowSpacebar { get; set; } = true;
/// <summary>
/// 空格键（空格键）的文本。不设置显示为" "
/// </summary>
public string keysSpacebarText { get; set; } = "Space";
/// <summary>
/// 键的字体系列
/// </summary>
public string keysFontFamily { get; set; } = "sans-serif";
/// <summary>
/// 按键的字体大小
/// </summary>
public string keysFontSize { get; set; } = "22px";
/// <summary>
/// 按键的字体粗细
/// </summary>
public string keysFontWeight { get; set; } = "normal";
/// <summary>
/// 图标键的大小
/// </summary>
public string keysIconSize { get; set; } = "25px";
/// <summary>
/// 将文档滚动到 input/textarea 元素的顶部或底部（通过放置选项）
/// </summary>
public bool autoScroll { get; set; } = false;
}
}
3.2 OnScreenKeyboard.razor文件
由于不需要界面代码,就留一行命名空间
@namespace Blazor100.Components
3.3 OnScreenKeyboard.razor文件
代码summary为屏幕键盘 OnScreenKeyboard 组件基类,以便有需要时可以直接继承新建个性化独立键盘类
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
namespace Blazor100.Components;
/// <summary>
/// 屏幕键盘 OnScreenKeyboard 组件基类
/// </summary>
public partial class OnScreenKeyboard : IAsyncDisposable
{
[Inject] IJSRuntime? JS { get; set; }
private IJSObjectReference? module;
private DotNetObjectReference<OnScreenKeyboard>? InstanceWebApi { get; set; }
/// <summary>
/// 获得/设置 组件class名称
/// </summary>
[Parameter]
public string ClassName { get; set; } = "virtualkeyboard";
/// <summary>
/// 获得/设置 键盘语言布局
/// </summary>
[Parameter]
public KeyboardKeysType? KeyboardKeys { get; set; } = KeyboardKeysType.english;
/// <summary>
/// 获得/设置 键盘类型
/// </summary>
[Parameter]
public KeyboardType Keyboard { get; set; } = KeyboardType.all;
/// <summary>
/// 获得/设置 对齐
/// </summary>
[Parameter]
public KeyboardPlacement Placement { get; set; } = KeyboardPlacement.bottom;
/// <summary>
/// 获得/设置 对齐
/// </summary>
[Parameter]
public string Placeholder { get; set; } = "";
/// <summary>
/// 获得/设置 对齐
/// </summary>
[Parameter]
public bool Specialcharacters { get; set; } = true;
/// <summary>
/// 获得/设置 配置
/// </summary>
[Parameter]
public KeyboardOption? Option { get; set; } = new KeyboardOption();
protected override async Task OnAfterRenderAsync(bool firstRender)
{
try
{
if (firstRender)
{
module = await JS!.InvokeAsync<IJSObjectReference>("import", "./lib/kioskboard/kioskboards.js");
InstanceWebApi = DotNetObjectReference.Create(this);
await module.InvokeVoidAsync("addScript", "./lib/kioskboard/kioskboard-aio-2.1.0.min.js");
Option??= new KeyboardOption();
if (KeyboardKeys != null) Option.KeyboardKeysType = KeyboardKeys!.Value;
try
{
await module.InvokeVoidAsync("init", ClassName, Option);
}
catch (Exception)
{
await Task.Delay(200);
await module.InvokeVoidAsync("init", ClassName, Option);
}
}
}
catch (Exception e)
{
if (OnError != null) await OnError.Invoke(e.Message);
}
}
async ValueTask IAsyncDisposable.DisposeAsync()
{
if (module is not null)
{
await module.DisposeAsync();
}
}
/// <summary>
/// 获得/设置 错误回调方法
/// </summary>
[Parameter]
public Func<string, Task>? OnError { get; set; }
}
4. Pages文件夹添加OnScreenKeyboards.razor文件,用于演示组件调用.
这里演示了六种不同的键盘风格参数调用,差别大家可以自己调试一下代码体会.
@page "/onscreenkeyboards"
<input class="@ClassName"
data-kioskboard-type="@KeyboardType.all.ToString()"
data-kioskboard-specialcharacters="true"
placeholder="全键盘" />
<input class="@ClassName"
data-kioskboard-type="@KeyboardType.keyboard.ToString()"
data-kioskboard-placement="@KeyboardPlacement.bottom.ToString()"
placeholder="字母键盘" />
<input class="@ClassName"
data-kioskboard-type="@KeyboardType.numpad.ToString()"
data-kioskboard-placement="@(KeyboardPlacement.bottom.ToString())"
placeholder="数字键盘" />
<OnScreenKeyboard ClassName="@ClassName" KeyboardKeys="KeyboardKeysType.spanish" />
<input class="@ClassName1"
data-kioskboard-type="@KeyboardType.keyboard.ToString()"
placeholder="黑主题" />
<OnScreenKeyboard ClassName="@ClassName1" Option="Option1" />
<input class="@ClassName2"
data-kioskboard-specialcharacters="true"
placeholder="特殊符号II" />
<OnScreenKeyboard ClassName="@ClassName2" Option="Option2" />
<input class="@ClassName3" data-kioskboard-specialcharacters="true" placeholder="特殊符号自定义" />
<OnScreenKeyboard ClassName="@ClassName3" Option="Option3" />
@code{
string BindValue = "virtualkeyboard";
string ClassName = "virtualkeyboard";
string ClassName1 = "virtualkeyboard1";
string ClassName2 = "virtualkeyboard2";
string ClassName3 = "virtualkeyboard3";
static Dictionary<string, string> keys1 = new Dictionary<string, string>() { { "0", "L" }, { "1", "O" } };
static Dictionary<string, string> keys2 = new Dictionary<string, string>() { { "0", "V" }, { "1", "E" } };
static List<Dictionary<string, string>> keysArray = new List<Dictionary<string, string>>() { keys1, keys2 };
KeyboardOption Option1 = new KeyboardOption()
{
//keysArrayOfObjects = keysArray,
keysFontFamily = "Barlow",
keysFontWeight = "500",
Theme = KeyboardTheme.dark,
};
KeyboardOption Option2 = new KeyboardOption()
{
KeyboardSpecialcharacters = KeyboardSpecialcharacters.europe
};
KeyboardOption Option3 = new KeyboardOption()
{
CustomerKeyboardSpecialcharacters = new string[] { "中", "国", "女", "足", "牛啊" }
};
protected override void OnInitialized()
{
base.OnInitialized();
}
}
<style>
.kioskboard-body-padding {
padding-top: unset !important;
}
</style>
5. _Imports.razor加入一行引用组件的命名空间.
@using Blazor100.Components
6. 首页引用组件演示页 <OnScreenKeyboards /> 或者 Shared/NavMenu.razor 添加导航
<div class="nav-item px-3">
<NavLink class="nav-link" href="onscreenkeyboards">
屏幕键盘
</NavLink>
</div>
7. F5运行程序
至此,使用JS隔离封装屏幕键盘kioskboard.js组件大功告成! Happy coding!
Blazor组件自做系列
Blazor组件自做一 : 使用JS隔离封装viewerjs库
Blazor组件自做二 : 使用JS隔离制作手写签名组件
Blazor组件自做三 : 使用JS隔离封装ZXing扫码
Blazor组件自做四: 使用JS隔离封装signature_pad签名组件
Blazor组件自做五: 使用JS隔离封装Google地图<03-24>
Blazor组件自做六: 使用JS隔离封装Baidu地图<03-25>
Blazor组件自做七: 使用JS隔离制作定位/持续定位组件<03-26>
Blazor组件自做八: 使用JS隔离封装屏幕键盘kioskboard.js组件<03-27>
项目源码 Github | Gitee
关联项目
FreeSql QQ群：4336577
BA & Blazor QQ群：795206915
Maui Blazor 中文社区 QQ群：645660665
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名AlexChow（包含链接： https://github.com/densen2014 ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系 。
转载声明
本文来自博客园，作者：周创琳 AlexChow，转载请注明原文链接：https://www.cnblogs.com/densen2014/p/16028242.html
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub
