Currently, I'm on web based mobile project for our current project. That's why I've developed this project with jQueryMobile framework because it's very simple and reliable to use for developers like us. In jQueryMobile, almost features are cool like calendar plugin, date plugin, etc. For me, keypad plugin is missing and I feel isn't not urgently needed because we can use mobile phone keypad as well. Unfortunately, my senior urged me to add KeyPad feature in our project. That's why I'm about to develop it by my own.

First of all, I need to write following coding in index.cfm.

view plain print about
1<label>Enter Phone Number</label>
2<!--- store current DOM --->
3<input type="hidden" name="currentDOM" id="currentDOM">
4<input type="text" name="phone" data-inline="true" id="phone" maxlength="8" /></td>
5<a href="keypad.html"
6    data-role="button"
7    onclick="setFocus('phone')"
8    data-iconpos="notext"
9    data-inline="true"
10    data-rel="dialog"
11    data-transition="pop"
12    data-icon="gear">&nbsp;</a>

After that, I need to add the following javascript coding between HEAD.

view plain print about
1$(document).ready(function() {
2 // catch the press event of every button
3 $('input[type="button"]').live('click',function() {
4    if ($("#currentDOM").val() != "")
5    {
6        // get which DOM we want to use for
7        var getCurrDom = $("#currentDOM").val();
8        // get how many numbers have been typed
9        var existingCount = $("#typeMessage").text();
10        if ($(this).val() == "Delete")
11        {
12         var mylength = existingCount.length;
13         var actlength = mylength - 1;
14     var str1 = existingCount.substring(0,actlength);
15         $("#typeMessage").text(str1);
16        }
17        else if ($(this).val() == "Set Number")
18        {
19            document.getElementById(getCurrDom).value = $("#typeMessage").text();
20            $('#keypad').dialog('close');
21        }
22        else
23        {
24            if (existingCount.length < document.getElementById(getCurrDom).maxLength)
25            {
26                var AddCount = existingCount + $(this).val();
27                $("#typeMessage").text(AddCount);
28            }
29        }
30    }    
31 });
32    $('input[type="text"]').live('click',function() {
33    var getDOM = $(this).attr("id");
34    $("#currentDOM").val(getDOM);
35    });
36});
37
38function setFocus(DOMname){
39    $("#currentDOM").val(DOMname);
40    $("#typeMessage").text("");
41}

After that, the following coding is for keypad.cfm

view plain print about
1<table align="center" border="0">
2    <tr>
3        <td width="40%" align="center">
4            <label><strong>Please Press Number</strong></label>
5        </td>
6        <td align="left"><span id="typeMessage"></span></td>
7    </tr>
8    <tr>
9        <td colspan="3">
10            <div data-role="controlgroup" data-type="horizontal" align="center">
11                <input type="button" value="1">
12                <input type="button" value="2">
13                <input type="button" value="3">
14                <input type="button" value="4">
15                <input type="button" value="5">
16                <input type="button" value="6">
17                <input type="button" value="7">
18                <input type="button" value="8">
19                <input type="button" value="9">
20                <input type="button" value="0">
21                <input type="button" value="Delete" data-icon="back">
22            </div>                
23        </td>
24    </tr>
25    <tr>
26        <td colspan="3">
27            <input type="button" value="Set Number" data-theme="b">
28        </td>
29    </tr>
30</table>

** Please don't forget to assign maxlength in each input box. **

You can check it out DEMO here.

This entry was posted on May 9, 2011 at 9:46 PM and has received 5201 views. There are currently 2 comments. Print this entry.