Keypad

@@adsense
Input text
Input password
Length control (ex: max 3 dig)
Shuffle buttons

                <!-- Text -->
                <div class="input-control text" data-role="keypad">
                    <input type="text">
                </div>

                <!-- Password -->
                <div class="input-control password" data-role="keypad">
                    <input type="password">
                </div>

                <!-- Length -->
                <div class="input-control password" data-role="keypad" data-length="3">
                    <input type="password">
                </div>

                <!-- Shuffle -->
                <div class="input-control text" data-role="keypad" data-shuffle="true">
                    <input type="text">
                </div>

Additional usage

Standalone keypad
Non standard usage
Non standard, shuffle
Custom keys
Custom keys, shuffle

                <div class="input-control text">
                    <input type="text" id="target1">
                </div>
                <div data-role="keypad" data-target="#target1"></div>

                <div class="input-control text">
                    <input type="text" id="target2">
                    <div class="button-group">
                        <button class="button dropdown-toggle"><span class="mif-keyboard"></span></button>
                        <div data-role="dropdown" data-no-close="true" style="right: 0;">
                            <div data-role="keypad" data-target="#target2"></div>
                        </div>
                    </div>
                </div>

                <div class="input-control text">
                    <input type="text" id="target3">
                    <div class="button-group">
                        <button class="button dropdown-toggle"><span class="mif-keyboard"></span></button>
                        <div data-role="dropdown" data-no-close="true" style="right: 0;">
                            <div data-role="keypad" data-shuffle="true" data-target="#target3"></div>
                        </div>
                    </div>
                </div>

                <div class="input-control text" data-role="keypad"
                     data-keys="q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m">
                    <input type="text">
                </div>

Events

 

                <div id="keypad-log1" class="padding20 debug"> </div>
                <div class="input-control text" data-role="keypad" data-on-change="$('#keypad-log1').text(this.value);">
                    <input type="text">
                    <button class="button"><span class="mif-key"></span></button>
                </div>
 

                <div id="keypad-log2" class="padding20 debug"> </div>
                <div class="input-control text" data-role="keypad">
                    <input type="text" onchange="$('#keypad-log2').text(this.value);">
                    <button class="button"><span class="mif-key"></span></button>
                </div>