如何通过js调用工控机(Windows)虚拟键盘

1. 需求背景

在工控机触摸屏中,通过浏览器web端进行表单输入,当聚焦表单输入框并不会出现虚拟键盘进行输入。

解决方式:

  1. 使用第三方npm虚拟键盘插件引入使用
  2. 使用js调用系统自带的虚拟键盘
  3. 使用快捷键Win+Ctrl+O打开关闭

本文介绍下第二种方式进行操作。

2. 实现方式

在网页中通过js调用Windows上本地的exe程序,通过修改 Windows 注册表来使用 window.open 打开键盘,实际上是在设置一个自定义的 URL 协议(如 "keyboardProtocol")与键盘应用程序(通常是系统自带的屏幕键盘)相关联。当用户在网页中点击一个链接或使用 JavaScript 打开一个 "keyboardProtocol" URL 时,这将触发屏幕键盘的打开。

  1. 找出虚拟键盘的可执行文件路径,如:C:\Windows\system32\osk.exe
  2. 编写注册文件reg文件
js 复制代码
Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\keyboard] // 定义自定义 URL 协议的关键部分
@="keyboardProtocol"  // 自定义的 URL 协议名称
"URL Protocol"="keyboardProtocol" // 确保了系统知道这是一个自定义协议

[HKEY_CLASSES_ROOT\keyboard\DefaultIcon] // 定义了当用户在资源管理器或文件浏览器中双击与 "keyboardProtocol" 相关联的文件时显示的图标
@="C:\\windows\\system32\\osk.exe" // 屏幕键盘应用程序的路径

[HKEY_CLASSES_ROOT\keyboard\shell]  // 定义了如何与该协议交互

[HKEY_CLASSES_ROOT\keyboard\shell\open] // 定义了当用户右键点击与 "keyboardProtocol" 相关联的文件或文件夹并选择"打开"时发生的行为

[HKEY_CLASSES_ROOT\keyboard\shell\open\command] // 定义了如何执行与 "open" 操作相关联的操作
@="\"C:\\windows\\system32\\osk.exe\""
  1. 双击执行
  2. js中调用
js 复制代码
// 方法一
 window.location.href="keyboard://";
//or
window.open("keyboard://");

</script>
<!-- 方法二-->
<a href="keyboard://">打开应用程序</a>

3. 总结

该方法依赖于Windows系统自带的虚拟键盘,不适用于其他操作系统。

提供了一种通过JavaScript调用Windows系统自带的虚拟键盘的方法,解决在工控机触摸屏的web浏览器中进行表单输入时调用虚拟键盘的问题。

相关推荐
有颜有货11 分钟前
PMC生产排产的4种算法,一次讲清
java·服务器·前端
小虎牙00713 分钟前
Android kotlin图片库Coil源码详解
android·前端
随风一样自由23 分钟前
【前端领域】前端开发核心应用场景与落地实践
前端·前端框架
an317421 小时前
弹窗数据流设计的两种高阶架构实践
前端·vue.js·架构
谢尔登1 小时前
【React】 状态管理方案
前端·react.js·前端框架
用户2136610035721 小时前
Vue商品详情与放大镜组件
前端·javascript
半个落月1 小时前
从Tapas小Demo理清localStorage、事件与this
前端·javascript
李明卫杭州1 小时前
Vue2 中 v-model 处理不同数据结构的技巧
前端·javascript·vue.js
李明卫杭州1 小时前
使用 computed 处理 v-model 复杂数据结构
前端·javascript·vue.js
丨我是张先生丨2 小时前
日语单词 Web Page
前端·css·css3