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文件夹

项目源码 Github | Gitee

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