var phoneTextField = Ti.UI.createTextField({
    top: 100,
    left: 10,
    right: 10,
    height: 35,
    keyboardType:Titanium.UI.KEYBOARD_PHONE_PAD,
    returnKeyType:Titanium.UI.RETURNKEY_DONE,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,    
    hintText: "Phone Number",
    font:{fontSize:20,fontFamily:'Marker Felt', fontWeight:'bold'}
});
win.add(phoneTextField);

4 Answers

• You Can use the KeyboardToolbar parameter, it doesn't work properly on OS4 beta4, but I actually build one by hand.

  Here is my code (it is a little complex as it does a little animation and I use plenty of FireEvents). Hope it helps.

  //Create main view container
  var postView = Titanium.UI.createView({
      top:0,
        width:320,
        height:460
  });
  
  
  // Flexible Space for Button bars
  var flexSpace = Titanium.UI.createButton({
      systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
  });
  
  //Done System Button
  var btn_done = Titanium.UI.createButton({
      systemButton:Titanium.UI.iPhone.SystemButton.DONE,
  });
  
  //Text Area 
  var postText = 'pls add your content here';
  var textArea = Titanium.UI.createTextArea({
      value:postText,
      height:94,
      width:259,
      top:87,
      left:30,
      font:{fontSize:14,fontFamily:'Helvetica Neue', fontWeight:'Light'},
      color:'#666666',
      textAlign:'left',
      borderRadius:5,
      borderStyle:Titanium.UI.INPUT_BORDERSTYLE_NONE,
      suppressReturn:false,
      backgroundColor:'white',
      zIndex:1
  });
  
  postView.add(textArea);
  
  // Creating the Keyboard Toobar
  var keyboardToolbar = Titanium.UI.createToolbar({
      items:[flexSpace,btn_done],
      top:224,
      borderTop:true,
      borderBottom:true,
      visible:false,
      opacity:0,
      //barColor:'#336699'
  });
  postView.add(keyboardToolbar);
  
  
  // ==============
  // = Listeners =
  // ==============
  
  //Done button on the keyboard toolbar to blur the keyboard focus
  btn_done.addEventListener('click', function()
  {
      Titanium.API.info('done btn on keyboard toolbar fired');
         textArea.blur();
      Titanium.App.fireEvent("hideKeyboardToolbar");
  });
  
  //Listener for the TextArea, to show the Keyboard Toolbar when focused
  textArea.addEventListener('focus', function(e)
  {
         Ti.API.info('TextArea: focus received');
      Titanium.App.fireEvent("showKeyboardToolbar");
  
  });
  
  // ==============================
  // = KEYBOARD TOOLBAR ANIMATION =
  // ==============================
  
  function showKeyboardToobar() {
      Ti.API.info("showKeyboardToobar Function Called")
  
      keyboarToolbarAnimation = Titanium.UI.createAnimation({
          curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
          top:204,
          opacity: 1,
          duration: 300,
          delay: 200,
          zIndex:4
      });
      keyboardToolbar.visible = true;
      keyboardToolbar.animate(keyboarToolbarAnimation);
  
  }
  
  function hideKeyboardToobar() {
      Ti.API.info("hideKeyboardToobar Function Called")
  
      keyboarToolbarAnimation = Titanium.UI.createAnimation({
          curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
          top:224,
          opacity: 0,
          duration: 100,
          delay: 0,
          zIndex:4
      });
      keyboardToolbar.visible = false;
      keyboardToolbar.animate(keyboarToolbarAnimation);
  }
  
  Titanium.App.addEventListener('showKeyboardToolbar', function(e)
  {
      showKeyboardToobar();
  });
  
  Titanium.App.addEventListener('hideKeyboardToolbar', function(e)
  {
      hideKeyboardToobar();
  });
  

• Isn't the issue here that the numeric and phone keypads have no return key? Objc developers face the same problem, and have to go through esoteric workarounds like http://stackoverflow.com/questions/584538/how-to-show-button-done-on-number-pad-on-iphone

  It would be wonderful if Ti could solve this for us :-)

• Would it be possible to create custom keyboards that would replace the stock keyboards. this way we could program the keys?

• Yeah, I admit this is a little confusing.

  the textfield is setup in a way to allow maximum programatic control. you'll need to manually blur like this:

  phoneTextField.addEventListener('return', function()
  {
      phoneTextField.blur();
  });
  

  This will cause the text field to blur when you click the return key. This allows you to wire different behaviors to the "return key", which may or may not blur the field.