使用JS調(diào)用工控機(jī)(Windows)虛擬鍵盤
1. 需求背景
在工控機(jī)觸摸屏中,通過瀏覽器web端進(jìn)行表單輸入,當(dāng)聚焦表單輸入框并不會(huì)出現(xiàn)虛擬鍵盤進(jìn)行輸入。
解決方式:
- 使用第三方npm虛擬鍵盤插件引入使用
- 使用js調(diào)用系統(tǒng)自帶的虛擬鍵盤
- 使用快捷鍵Win+Ctrl+O打開關(guān)閉
本文介紹下第二種方式進(jìn)行操作。
2. 實(shí)現(xiàn)方式
在網(wǎng)頁中通過js調(diào)用Windows上本地的exe程序,通過修改 Windows 注冊(cè)表來使用
window.open 打開鍵盤,實(shí)際上是在設(shè)置一個(gè)自定義的 URL 協(xié)議(如 "keyboardProtocol")與鍵盤應(yīng)用程序(通常是系統(tǒng)自帶的屏幕鍵盤)相關(guān)聯(lián)。當(dāng)用戶在網(wǎng)頁中點(diǎn)擊一個(gè)鏈接或使用 JavaScript 打開一個(gè) "keyboardProtocol" URL 時(shí),這將觸發(fā)屏幕鍵盤的打開。
- 找出虛擬鍵盤的可執(zhí)行文件路徑,如:
C:\Windows\system32\osk.exe
- 編寫注冊(cè)文件reg文件
Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\keyboard] // 定義自定義 URL 協(xié)議的關(guān)鍵部分 @="keyboardProtocol" // 自定義的 URL 協(xié)議名稱 "URL Protocol"="keyboardProtocol" // 確保了系統(tǒng)知道這是一個(gè)自定義協(xié)議 [HKEY_CLASSES_ROOT\keyboard\DefaultIcon] // 定義了當(dāng)用戶在資源管理器或文件瀏覽器中雙擊與 "keyboardProtocol" 相關(guān)聯(lián)的文件時(shí)顯示的圖標(biāo) @="C:\\windows\\system32\\osk.exe" // 屏幕鍵盤應(yīng)用程序的路徑 [HKEY_CLASSES_ROOT\keyboard\shell] // 定義了如何與該協(xié)議交互 [HKEY_CLASSES_ROOT\keyboard\shell\open] // 定義了當(dāng)用戶右鍵點(diǎn)擊與 "keyboardProtocol" 相關(guān)聯(lián)的文件或文件夾并選擇“打開”時(shí)發(fā)生的行為 [HKEY_CLASSES_ROOT\keyboard\shell\open\command] // 定義了如何執(zhí)行與 "open" 操作相關(guān)聯(lián)的操作 @="\"C:\\windows\\system32\\osk.exe\""
- 雙擊執(zhí)行
- js中調(diào)用
// 方法一 window.location.href="keyboard://" rel="external nofollow" rel="external nofollow" ; //or window.open("keyboard://"); </script> <!-- 方法二--> <a href="keyboard://" rel="external nofollow" rel="external nofollow" >打開應(yīng)用程序</a>
3. 總結(jié)
該方法依賴于Windows系統(tǒng)自帶的虛擬鍵盤,不適用于其他操作系統(tǒng)。
提供了一種通過JavaScript調(diào)用Windows系統(tǒng)自帶的虛擬鍵盤的方法,解決在工控機(jī)觸摸屏的web瀏覽器中進(jìn)行表單輸入時(shí)調(diào)用虛擬鍵盤的問題。
以上就是使用JS調(diào)用工控機(jī)(Windows)虛擬鍵盤的詳細(xì)內(nèi)容,更多關(guān)于JS調(diào)用Windows虛擬鍵盤的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式
這篇文章主要給大家介紹了關(guān)于Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式的相關(guān)資料,echarts的圖表配置非常的靈活自由,但是不熟悉的時(shí)候容易不知道怎么配置,需要的朋友可以參考下2023-06-06js如何查找json數(shù)據(jù)中的最大值和最小值方法
這篇文章主要介紹了js如何查找json數(shù)據(jù)中的最大值和最小值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04使用Math.max,Math.min獲取數(shù)組中的最值實(shí)例
下面小編就為大家?guī)硪黄褂肕ath.max,Math.min獲取數(shù)組中的最值實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04eval(function(p,a,c,k,e,d)系列解密javascript程序
在網(wǎng)上下載源代碼時(shí),很可能發(fā)現(xiàn)代碼里的JS腳本看不懂,這是由于JS加密造成的。如果你發(fā)現(xiàn)JS是以eval(function(p,a,c,k,e,r){e=function(c)開頭的,看到這個(gè)頁面你就可以解決他2007-04-04JS中的常見數(shù)組遍歷案例詳解(forEach,?map,?filter,?sort,?reduce,?ever
這篇文章主要介紹了JS中的常見數(shù)組遍歷方法詳解(forEach,?map,?filter,?sort,?reduce,?every),本篇講用實(shí)際案例詳解他們的語法和用法,需要的朋友可以參考下2023-05-05javascript實(shí)現(xiàn)下雪效果【實(shí)例代碼】
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)下雪效果【實(shí)例代碼】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05簡(jiǎn)單談?wù)刯avascript代碼復(fù)用模式
這篇文章主要簡(jiǎn)單談?wù)刯avascript代碼復(fù)用模式,主要詳細(xì)介紹了類式繼承模式中的默認(rèn)模式,希望大家能夠喜歡。2015-01-01