觸摸屏鍵盤插件Virtual Keyboard 該怎么用 Virtual Keyboard 入門指南

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

所以在一些需要簡單輸入的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',
  buttonHover : 'ui-state-hover',
  buttonAction : 'ui-state-active', 
 buttonDisabled : 'ui-state-disabled',
  buttonEmpty : 'ui-keyboard-empty' 
 },  
 autoAccept : true,
  autoAcceptOnEsc : false, 
 lockInput : false, 
 restrictInput : true, 
 restrictInclude : '', // e.g. 'a b foo \ud83d\ude38'
  acceptValid : true, 
 autoAcceptOnValid : false,  
 cancelClose : true, 
 tabNavigation : false,
  enterNavigation : true,
  enterMod : 'altKey', 
 stopAtEnd : true, 
 appendLocally : false,
  appendTo : 'body',  
 stickyShift : true, 
 caretToEnd : false, 
 preventPaste : true,  
 scrollAdjustment : 10, 
 maxLength : false, 
 maxInsert : true, 
 repeatDelay : 500, 
 repeatRate : 20, 
 resetDefault : false, 
 openOn : 'focus',  
 keyBinding : 'mousedown touchstart',
  useWheel : true, 
 useCombos : true, 
 initialized : function(e, keyboard, el) {}, 
 beforeVisible : function(e, keyboard, el) {},
  visible : function(e, keyboard, el) {}, 
 beforeInsert : function(e, keyboard, el, textToAdd) { return textToAdd; },
  change : function(e, keyboard, el) {}, 
 beforeClose : function(e, keyboard, el, accepted) {},
  accepted : function(e, keyboard, el) {},
  canceled : function(e, keyboard, el) {}, 
 restricted : function(e, keyboard, el) {},
  hidden : function(e, keyboard, el) {}, 
 switchInput : function(keyboard, goToNext, isAccepted) {},
  create : function(keyboard) { return keyboard.buildKeyboard(); },
  buildKey : function( keyboard, data ) {
 return data;  }, 
 validate : function() { 
 return true;  }
}); 

如果需要數字鍵盤，可以把這些參數設成true

            layout : 'num', restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in preventPaste : true, // prevent ctrl-v and right click autoAccept : true
我自己是用angular開發的，為了在項目中可以哪里需要哪里調用，我封裝在一個factory里面，
下面送上我的源碼
html:

   
js:

factory: