jQuery虛擬鍵盤插件softkey

簡要教程

softkey是一款輕量級(jí)、跨瀏覽器的jQuery虛擬鍵盤插件。該虛擬鍵盤插件允許用戶自定義鍵盤的布局。它兼容IE8瀏覽器，使用靈活方便。

使用方法

在頁面中引入softkeys-0.0.1.css、jquery和softkeys-0.0.1.js文件。

<link rel="stylesheet" type="text/css" href="css/softkeys-0.0.1.css">
<script src="js/jquery.min.js"></script>
<script src="js/softkeys-0.0.1.js"></script>

HTML結(jié)構(gòu)

使用一個(gè)<div>元素來作為虛擬鍵盤的占位元素。其中，使用data-target屬性來指定和虛擬鍵盤綁定的表單域。

<div class="softkeys" data-target="input[name='code']"></div>

初始化插件

在頁面DOM元素加載完畢之后，可以通過下面的方法來初始化該虛擬鍵盤插件。

$(document).ready(function(){
    $('.softkeys').softkeys({
        target : $('.softkeys').data('target'),
        layout : [
            [
                ['`','~'],
                ['1','!'],
                ['2','@'],
                ['3','#'],
                ['4','$'],
                ['5','%'],
                ['6','^'],
                ['7','&'],
                ['8','*'],
                ['9','('],
                ['0',')'],
                ['-', '_'],
                ['=','+'],
                'delete'
            ],
            [
                'q','w','e','r','t','y','u','i','o','p',
                ['[','{'],
                [']','}']
            ],
            [
                'capslock',
                'a','s','d','f','g','h','j','k','l',
                [';',':'],
                ["'",'"'],
                ['\\','|']
            ],
            [
                'shift',
                'z','x','c','v','b','n','m',
                [',','<'],
                ['.','>'],
                ['/','?'],
                ['@']
            ]
        ]
    });
});

配置參數(shù)

• softkey虛擬鍵盤插件的可用配置參數(shù)有：

• target：虛擬鍵盤綁定的input域。

• layout：虛擬鍵盤的布局。

• rowSeperator：換行符。默認(rèn)為br。

• buttonWrapper：按鍵容器。默認(rèn)為li。