Numeric keypad for jQuery mobile

I had a problem with RhoElements. I couldn't display the numeric keypad for input (type="number"). This was not supported in the version 2 of RhoElements. I'm talking about displaying a numeric keypad in the RhoElements context, on the new ET1 from Motorola. Here is my solution. A hand made numeric keypad.

by BamBamm

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<!-- Numpad as table via JQuery Mobile -->
<input style="background: white; color: black;" type="text" readonly="readonly" id="myInput"/>
    <table class="ui-bar-a" id="n_keypad" style="display: none; -khtml-user-select: none;">
    <tr>
       <td><a data-role="button" data-theme="b" class="numero">7</a></td>
       <td><a data-role="button" data-theme="b" class="numero">8</a></td>
       <td><a data-role="button" data-theme="b" class="numero">9</a></td>
       <td><a data-role="button" data-theme="e" class="del">Del</a></td>
    </tr>
    <tr>
       <td><a data-role="button" data-theme="b" class="numero">4</a></td>
       <td><a data-role="button" data-theme="b" class="numero">5</a></td>
       <td><a data-role="button" data-theme="b" class="numero">6</a></td>
       <td><a data-role="button" data-theme="e" class="clear">Clear</a></td>
    </tr>
    <tr>
       <td><a data-role="button" data-theme="b" class="numero">1</a></td>
       <td><a data-role="button" data-theme="b" class="numero">2</a></td>
       <td><a data-role="button" data-theme="b" class="numero">3</a></td>
       <td><a data-role="button" data-theme="e">&nbsp;</a></td>
    </tr>
    <tr>
       <td><a data-role="button" data-theme="e" class="neg">-</a></td>
       <td><a data-role="button" data-theme="b" class="zero">0</a></td>
       <td><a data-role="button" data-theme="e" class="pos">+</a></td>
       <td><a data-role="button" data-theme="e" class="done">Done</a></td>
    </tr>
    </table>

JavaScript

$(document).ready(function(){
      $('#myInput').click(function(){
          $('#n_keypad').fadeToggle('fast');
      });
      $('.done').click(function(){
          $('#n_keypad').hide('fast');
      });
      $('.numero').click(function(){
        if (!isNaN($('#myInput').val())) {
           if (parseInt($('#myInput').val()) == 0) {
             $('#myInput').val($(this).text());
           } else {
             $('#myInput').val($('#myInput').val() + $(this).text());
           }
        }
      });
      $('.neg').click(function(){
          if (!isNaN($('#myInput').val()) && $('#myInput').val().length > 0) {
            if (parseInt($('#myInput').val()) > 0) {
              $('#myInput').val(parseInt($('#myInput').val()) - 1);
            }
          }
      });
      $('.pos').click(function(){
          if (!isNaN($('#myInput').val()) && $('#myInput').val().length > 0) {
            $('#myInput').val(parseInt($('#myInput').val()) + 1);
          }
      });
      $('.del').click(function(){
          $('#myInput').val($('#myInput').val().substring(0,$('#myInput').val().length - 1));
      });
      $('.clear').click(function(){
          $('#myInput').val('');
      });
      $('.zero').click(function(){
        if (!isNaN($('#myInput').val())) {
          if (parseInt($('#myInput').val()) != 0) {
            $('#myInput').val($('#myInput').val() + $(this).text());
          }
        }
      });
    });