最近公司有个项目，这个项目的显示器是触摸屏，

所以在一些需要简单输入的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'