Titanium Simple Numberpad Entry


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. // Number pad input
  2. function NumberPadInput(InputDOM, WindowDOM)
  3. {
  4. LogInfo('Generating a number pad input for the given input DOM');
  5.  
  6. // Edit the input DOM element
  7. InputDOM.editable = false;
  8. //InputDOM.touchEnabled = false;
  9.  
  10. // Add the event listener to the DOM element
  11. InputDOM.addEventListener('focus', function() {
  12.  
  13. // Create the number pad container
  14. var NumberPadContainer = Titanium.UI.createView({
  15. borderColor: '#333',
  16. borderWidth: 1,
  17. width: 150,
  18. height: 150,
  19. bottom: 0
  20. });
  21.  
  22. var BttnWidth = NumberPadContainer.width / 3;
  23. var BttnHeight = NumberPadContainer.height / 4;
  24.  
  25. // Create the buttons
  26.  
  27. // Top row
  28. var NumberPadBttn_01 = Titanium.UI.createButton({ title: '1', width: BttnWidth, height: BttnHeight, top: 0, left: 0 });
  29. var NumberPadBttn_02 = Titanium.UI.createButton({ title: '2', width: BttnWidth, height: BttnHeight, top: 0 });
  30. var NumberPadBttn_03 = Titanium.UI.createButton({ title: '3', width: BttnWidth, height: BttnHeight, top: 0, right: 0 });
  31.  
  32. // Middle row
  33. var NumberPadBttn_04 = Titanium.UI.createButton({ title: '4', width: BttnWidth, height: BttnHeight, top: BttnHeight, left: 0 });
  34. var NumberPadBttn_05 = Titanium.UI.createButton({ title: '5', width: BttnWidth, height: BttnHeight, top: BttnHeight});
  35. var NumberPadBttn_06 = Titanium.UI.createButton({ title: '6', width: BttnWidth, height: BttnHeight, top: BttnHeight, right: 0 });
  36.  
  37. // Third row
  38. var NumberPadBttn_07 = Titanium.UI.createButton({ title: '7', width: BttnWidth, height: BttnHeight, bottom: BttnHeight, left: 0 });
  39. var NumberPadBttn_08 = Titanium.UI.createButton({ title: '8', width: BttnWidth, height: BttnHeight, bottom: BttnHeight });
  40. var NumberPadBttn_09 = Titanium.UI.createButton({ title: '9', width: BttnWidth, height: BttnHeight, bottom: BttnHeight, right: 0 });
  41.  
  42. // Fourth row
  43. var NumberPadBttn_00 = Titanium.UI.createButton({ title: '0', width: BttnWidth, height: BttnHeight, bottom: 0 });
  44. var NumberPadBttn_Del = Titanium.UI.createButton({ title: '<X', width: BttnWidth, height: BttnHeight, bottom: 0, right: 0 });
  45. var NumberPadBttn_OK = Titanium.UI.createButton({ title: 'OK', width: BttnWidth, height: BttnHeight, bottom: 0, left: 0 });
  46.  
  47. // Create the event listeners for the number pad buttons
  48. NumberPadBttn_00.addEventListener('click', function(e) { InputDOM.value = InputDOM.value + e.source.title; });
  49. NumberPadBttn_01.addEventListener('click', function(e) { InputDOM.value = InputDOM.value + e.source.title; });
  50. NumberPadBttn_02.addEventListener('click', function(e) { InputDOM.value = InputDOM.value + e.source.title; });
  51. NumberPadBttn_03.addEventListener('click', function(e) { InputDOM.value = InputDOM.value + e.source.title; });
  52. NumberPadBttn_04.addEventListener('click', function(e) { InputDOM.value = InputDOM.value + e.source.title; });
  53. NumberPadBttn_05.addEventListener('click', function(e) { InputDOM.value = InputDOM.value + e.source.title; });
  54. NumberPadBttn_06.addEventListener('click', function(e) { InputDOM.value = InputDOM.value + e.source.title; });
  55. NumberPadBttn_07.addEventListener('click', function(e) { InputDOM.value = InputDOM.value + e.source.title; });
  56. NumberPadBttn_08.addEventListener('click', function(e) { InputDOM.value = InputDOM.value + e.source.title; });
  57. NumberPadBttn_09.addEventListener('click', function(e) { InputDOM.value = InputDOM.value + e.source.title; });
  58.  
  59. // Delete key
  60. NumberPadBttn_Del.addEventListener('click', function(e) {
  61. if(InputDOM.value.length > 0)
  62. {
  63. InputDOM.value = InputDOM.value.substr(0, InputDOM.value.length-1);
  64. }
  65. });
  66.  
  67. // Okay/done button
  68. NumberPadBttn_OK.addEventListener('click', function(e) {
  69. InputDOM.blur(); // Blur the input
  70. Window.remove( NumberPadContainer ); // Remove the number pad
  71. });
  72.  
  73. // Assemble the number pad
  74. NumberPadContainer.add( NumberPadBttn_01 );
  75. NumberPadContainer.add( NumberPadBttn_02 );
  76. NumberPadContainer.add( NumberPadBttn_03 );
  77. NumberPadContainer.add( NumberPadBttn_04 );
  78. NumberPadContainer.add( NumberPadBttn_05 );
  79. NumberPadContainer.add( NumberPadBttn_06 );
  80. NumberPadContainer.add( NumberPadBttn_07 );
  81. NumberPadContainer.add( NumberPadBttn_08 );
  82. NumberPadContainer.add( NumberPadBttn_09 );
  83. NumberPadContainer.add( NumberPadBttn_00 );
  84.  
  85. NumberPadContainer.add( NumberPadBttn_Del );
  86. NumberPadContainer.add( NumberPadBttn_OK );
  87.  
  88. // Add the container to the window
  89. WindowDOM.add( NumberPadContainer );
  90.  
  91. });
  92. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.