D8.OnScreenKeyboard.md · 飘落/Blazor100

## Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件 ##

### 1. 运行截图

[演示地址](https://blazor.app1.es/onscreenkeyboards)

![](https://img2022.cnblogs.com/blog/1980213/202203/1980213-20220323035709894-1445817924.jpg)

### 2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件

#### 2.1 常规操作,懒加载js库, :smiley:

```
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](https://github.com/densen2014/Blazor100) | [Gitee](https://gitee.com/densen2014/Blazor100)

**kioskboard-aio-2.1.0.min.js**

**kioskboard-keys-*.json**

![](https://img2022.cnblogs.com/blog/1980213/202203/1980213-20220323074358973-1991380670.jpg)

### 3. 打开Components文件夹 , 新建三个文件

#### 3.1 KeyboardOption 键盘配置类

<details>
<summary>KeyboardOption.cs代码</summary>

```
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;
    }
}

```
</details>

#### 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"

@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>

```
![image](https://img2022.cnblogs.com/blog/1980213/202203/1980213-20220323074817371-1411153035.jpg)
![image](https://img2022.cnblogs.com/blog/1980213/202203/1980213-20220323074842149-689509365.jpg)
![image](https://img2022.cnblogs.com/blog/1980213/202203/1980213-20220323074848256-1497622526.jpg)
![image](https://img2022.cnblogs.com/blog/1980213/202203/1980213-20220323074901283-1393983477.jpg)
![image](https://img2022.cnblogs.com/blog/1980213/202203/1980213-20220323074908285-463386397.jpg)

### 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库](D1.Viewer.md)

[Blazor组件自做二 : 使用JS隔离制作手写签名组件](D2.Handwritten.md)
  
  [Blazor组件自做三 : 使用JS隔离封装ZXing扫码](D3.BarcodeScanner.md)
  
  [Blazor组件自做四: 使用JS隔离封装signature_pad签名组件](D4.SignaturePad.md)

[Blazor组件自做五: 使用JS隔离封装Google地图](D5.GoogleMap.md)

[Blazor组件自做六: 使用JS隔离封装Baidu地图](D6.BaiduMap.md)

[Blazor组件自做七: 使用JS隔离制作定位/持续定位组件](D7.Geolocation.md)

[Blazor组件自做八: 使用JS隔离封装屏幕键盘kioskboard.js组件](D8.OnScreenKeyboard.md)

### 项目源码 [Github](https://github.com/densen2014/Blazor100) | [Gitee](https://gitee.com/densen2014/Blazor100)

飘落/Blazor100

简介

发行版

贡献者

近期动态

飘落/Blazor100 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

飘落/Blazor100