js软键盘：mottie 的使用实例

接到一个任务，密码输入框要使用软键盘，在网上找到了如下一些js软键盘：

http://debugger.ru/demo/projects/virtualkeyboard/

http://freecode.com/projects/jsvk

http://www.codeproject.com/Articles/13748/JavaScript-Virtual-Keyboard

http://www.oschina.net/news/17864/javascript-virtualkeyboard-3-7-0

https://github.com/Mottie/Keyboard

我最喜欢的是最后一个mottie，界面漂亮，也兼容ie6（客户需求）.本文讲讲mottie的使用实例：

1.引入文件

<!--必须引入的两个css文件：jquery-ui.css，keyboard.css -->
<link href="jquery-ui/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="keyboard/keyboard.css" rel="stylesheet" type="text/css"/>

<!-- js文件的引入必须按照正确的顺序：最先引入jquery.js，然后是jquery-ui，jquery.keyboard.js是基于jquery-ui的，需要它后面引入。(我由于开始没有注意js引入顺序，报了不少错)-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui/ui/jquery-ui.js" ></script>
<script type="text/javascript" src="keyboard/jquery.keyboard.js" ></script>
<script type="text/javascript" src="keyboard/jquery.keyboard.extension-typing.js" ></script>

2.页面html代码

<input type="password" id="password" name="password" class="qwerty" value="" />
<img id="passwd" class="tooltip" title="软键盘输入" src="keyboard.png"/>

注意：

①注意三个地方：输入框id，输入框class，软键盘id。（id可随意命名，只需要和接下来的javascript代码中的id对应即可）

②密码输入框（id=password）的class必须为“qwerty”，否则无法显示软键盘样式。所以，如果密码框有样式，就直接写在style=“”中，不要用class标签引入了。（不知有没有更好的解决办法）

3.javascript代码

<script type="text/javascript">
       jQuery('#password').keyboard({
           openOn : null,
           stayOpen : true,
           layout : 'qwerty'
        }).addTyping();

        jQuery('#passwd').click(function(){
           jQuery('#password').getkeyboard().reveal();
        });
  </script>

注意：这一段js代码需要放到</body>的前一段。

（《javascript高级程序设计》说js代码放在</body>前面是最合适的位置。因为js要在dom加载完之后执行，而js放在</body>前可以保证“dom加载完毕执行才执行此段js”。如果此段js放在head中，必须要需要加上$.ready(function(){#js代码}，不然获取不到元素$("#password"))

）

这段代码实现了：给密码输入框（id=password）一个软键盘样式，但默认不显示。当点击软键盘图标（id=passwd）时，显示（reveal）软键盘。

小结：

以上是我使用mottie实现密码软键盘的实例，这里http://mottie.github.com/Keyboard/ 有更多的demo供大家参考~