最近公司有個項目，這個項目的顯示器是觸摸屏，

所以在一些需要簡單輸入的input需要加一個觸摸屏的軟鍵盤，

我在github上找了很多開源項目，最后選擇了Virtual Keyboard，

以下是我自己學習和使用Virtual Keyboard的經驗和理解，可能不是很深入，嘿嘿。。。。。。

以下是正文

首先我們需要從github上把項目的代碼拉下來，地址：https://github.com/Mottie/Keyboard

Virtual Keyboard官網地址：http://mottie.github.io/Keyboard/

把代碼拉下來之后呢，把Keyboard-master文件整個考到你的項目中，（有小伙伴會問，這個文件太大了，怎么辦，先不管，后來刪沒有用到的就好啦）

然后根據你引入文件的路徑，把下面這些文件引入你的項目的index之類（就是你自己通常往哪里引入js，css）

jquery.min.js
jquery-ui.css
bootstrap.min.css
jquery-ui.min.js
keyboard.css
jquery.keyboard.js
keyboard-previewkeyset.css
jquery.keyboard.extension-all.js
引入之后，你哪個input需要軟鍵盤，就把它的id設成keyboard，然后設置一下自己的js，
代碼是在是太多了， $('#keyboard').keyboard({
language : null, // string or array
rtl : false, // language direction right-to-left
layout :?'qwerty', //鍵盤的種類
customLayout : { 'normal': ['{cancel}'] },
position : {
of : null,
my : 'center top',
at : 'center top',
at2: 'center bottom'
},
reposition : true,
usePreview : true,
alwaysOpen : false,
initialFocus : true,
noFocus : false,
stayOpen : false,
userClosed : false,
ignoreEsc : false,
closeByClickEvent : false,
display : {
'a' : '\u2714:Accept (Shift-Enter)',
'accept' : 'Accept:Accept (Shift-Enter)',
'alt' : 'AltGr:Alternate Graphemes',
'b' : '\u232b:Backspace',
'bksp' : 'Bksp:Backspace',
'c' : '\u2716:Cancel (Esc)',
'cancel' : 'Cancel:Cancel (Esc)',
'clear' : 'C:Clear',
'combo' : '\u00f6:Toggle Combo Keys',
'dec' : '.:Decimal',
'e' : '\u21b5:Enter',
'empty' : '\u00a0', //  
'enter' : 'Enter:Enter',
'left' : '\u2190',
'lock' : '\u21ea Lock:Caps Lock',
'next' : 'Next',
'prev' : 'Prev',
'right' : '\u2192',
's' : '\u21e7:Shift',
'shift' : 'Shift:Shift',
'sign' : '\u00b1:Change Sign',
'space' : ' :Space',
't' : '\u21e5:Tab',
'tab' : '\u21e5 Tab:Tab',
'toggle' : ' ',
'valid': 'valid',
'invalid': 'invalid',
'active': 'active',
'disabled': 'disabled'
},
wheelMessage : 'Use mousewheel to see other keys',
css : {
input : 'ui-widget-content ui-corner-all',
container : 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix',
popup: '',
buttonDefault : 'ui-state-default ui-corner-all'

轉載于:https://www.cnblogs.com/moxiaodegu/p/8343096.html

總結

以上是生活随笔為你收集整理的触摸屏键盘插件Virtual Keyboard 该怎么用 Virtual Keyboard 入门指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。