// Number pad input
function NumberPadInput(InputDOM, WindowDOM)
{
	LogInfo('Generating a number pad input for the given input DOM');
	
	// Edit the input DOM element
	InputDOM.editable			=	false;
	//InputDOM.touchEnabled	=	false;
	
	// Add the event listener to the DOM element
	InputDOM.addEventListener('focus', function() {
		
		// Create the number pad container
		var NumberPadContainer	=	Titanium.UI.createView({
			borderColor:	'#333',
			borderWidth:	1,
			width:				150,
			height:				150,
			bottom:				0
		});
		
		var BttnWidth		=	NumberPadContainer.width / 3;
		var	BttnHeight	=	NumberPadContainer.height / 4;
		
		// Create the buttons
		
		// Top row
		var NumberPadBttn_01	=	Titanium.UI.createButton({	title:	'1', width:	BttnWidth, height: BttnHeight,	top:	0,	left:		0	});
		var NumberPadBttn_02	=	Titanium.UI.createButton({	title:	'2', width:	BttnWidth, height: BttnHeight,	top:	0	});
		var NumberPadBttn_03	=	Titanium.UI.createButton({	title:	'3', width:	BttnWidth, height: BttnHeight,	top:	0,	right:	0	});
		
		// Middle row
		var NumberPadBttn_04	=	Titanium.UI.createButton({	title:	'4', width:	BttnWidth, height: BttnHeight,	top:	BttnHeight,	left:	0	});
		var NumberPadBttn_05	=	Titanium.UI.createButton({	title:	'5', width:	BttnWidth, height: BttnHeight,	top:	BttnHeight});
		var NumberPadBttn_06	=	Titanium.UI.createButton({	title:	'6', width:	BttnWidth, height: BttnHeight,	top:	BttnHeight,	right:	0	});
		
		// Third row
		var NumberPadBttn_07	=	Titanium.UI.createButton({	title:	'7', width:	BttnWidth, height: BttnHeight,	bottom:	BttnHeight,	left:		0	});
		var NumberPadBttn_08	=	Titanium.UI.createButton({	title:	'8', width:	BttnWidth, height: BttnHeight,	bottom:	BttnHeight	});
		var NumberPadBttn_09	=	Titanium.UI.createButton({	title:	'9', width:	BttnWidth, height: BttnHeight,	bottom:	BttnHeight,	right:	0	});

		// Fourth row
		var NumberPadBttn_00	=	Titanium.UI.createButton({	title:	'0', 	width:	BttnWidth, height: BttnHeight, 	bottom:	0	});
		var NumberPadBttn_Del	=	Titanium.UI.createButton({	title:	'<X', width:	BttnWidth, height: BttnHeight, 	bottom:	0, right:	0	});
		var NumberPadBttn_OK	=	Titanium.UI.createButton({	title:	'OK', width:	BttnWidth, height: BttnHeight, 	bottom:	0, left:	0	});
		
		// Create the event listeners for the number pad buttons
		NumberPadBttn_00.addEventListener('click', function(e) {	InputDOM.value	=	InputDOM.value + e.source.title;	});
		NumberPadBttn_01.addEventListener('click', function(e) {	InputDOM.value	=	InputDOM.value + e.source.title;	});
		NumberPadBttn_02.addEventListener('click', function(e) {	InputDOM.value	=	InputDOM.value + e.source.title;	});
		NumberPadBttn_03.addEventListener('click', function(e) {	InputDOM.value	=	InputDOM.value + e.source.title;	});
		NumberPadBttn_04.addEventListener('click', function(e) {	InputDOM.value	=	InputDOM.value + e.source.title;	});
		NumberPadBttn_05.addEventListener('click', function(e) {	InputDOM.value	=	InputDOM.value + e.source.title;	});
		NumberPadBttn_06.addEventListener('click', function(e) {	InputDOM.value	=	InputDOM.value + e.source.title;	});
		NumberPadBttn_07.addEventListener('click', function(e) {	InputDOM.value	=	InputDOM.value + e.source.title;	});
		NumberPadBttn_08.addEventListener('click', function(e) {	InputDOM.value	=	InputDOM.value + e.source.title;	});
		NumberPadBttn_09.addEventListener('click', function(e) {	InputDOM.value	=	InputDOM.value + e.source.title;	});
		
		// Delete key
		NumberPadBttn_Del.addEventListener('click', function(e) {
			if(InputDOM.value.length > 0)
			{
				InputDOM.value	=	InputDOM.value.substr(0, InputDOM.value.length-1);
			}
		});
		
		// Okay/done button
		NumberPadBttn_OK.addEventListener('click', function(e) {
			InputDOM.blur();	// Blur the input
			Window.remove( NumberPadContainer );	// Remove the number pad
		});
		
		// Assemble the number pad
		NumberPadContainer.add( NumberPadBttn_01 );
		NumberPadContainer.add( NumberPadBttn_02 );
		NumberPadContainer.add( NumberPadBttn_03 );
		NumberPadContainer.add( NumberPadBttn_04 );
		NumberPadContainer.add( NumberPadBttn_05 );
		NumberPadContainer.add( NumberPadBttn_06 );
		NumberPadContainer.add( NumberPadBttn_07 );
		NumberPadContainer.add( NumberPadBttn_08 );
		NumberPadContainer.add( NumberPadBttn_09 );
		NumberPadContainer.add( NumberPadBttn_00 );
		
		NumberPadContainer.add( NumberPadBttn_Del );
		NumberPadContainer.add( NumberPadBttn_OK );
		
		// Add the container to the window
		WindowDOM.add( NumberPadContainer );

	});
}

Titanium Simple Numberpad Entry

number

JavaScript