7 Answers

• Accepted Answer

  Hi there

  I puzzled over this a while back, it seems that the textArea doesn't support a hint text property in the iPhone SDK. Yes it's inconsistent, but if you really want it you 'could' display a label over the textArea with the hint text when the textArea is blurred and contains no text. However, you may also need to setFocus to the textArea in the label click event - in case the user clicks directly over the label.

  Note: using a label means that hint text could be formatted differently (i.e. greyed-out and italicised)

  Cheers,
  Chris

• Just another example of how to do this manually:

  var textArea = Titanium.UI.createTextArea({
      value : 'Enter TExt',
  });
  textArea._hintText = textArea.value;
  
  textArea.addEventListener('focus',function(e){
      if(e.source.value == e.source._hintText){
          e.source.value = "";
      }
  });
  textArea.addEventListener('blur',function(e){
      if(e.source.value==""){
          e.source.value = e.source._hintText;
      }
  });
  

• Here's some code that works rather well:

  var value = "Whatever is going into the text area";
  var hintText = "Notes";
  
  var field = Ti.UI.createTextArea({
      value: value,
      color: 'blue'
  });
  
  var hint = Ti.UI.createLabel({
      text: hintText,
      color: 'gray',
      textAlign: 'left',
      left: '3%',
      top: '20%',
      height: '20%',
      width: '100%',
      backgroundColor: 'transparent',
      touchEnabled: true
  });
  
  field.add(hint);
  
  if (field.value.length > 0) {
      hint.hide();
  }
  
  //*** Hint text appears when TextArea is blank, disappears when text is entered
  field.addEventListener('change', function(e) {
      if (e.source.value.length > 0) {
          hint.hide();
      } else {
          hint.show();
      }
  });
  //*** Make sure that TextArea gets focus if they tap the hint label
  hint.addEventListener('click', function(e) {
      field.focus();
  });
  

• I am using Alloy and this is my code.

  var hint = 'Please make the description as accurate as possible.';
  
  hintText(hint);
  
  $.mytextAreaID.addEventListener('focus', function(e) {
      if($.mytextAreaID.value == hint){
          $.mytextAreaID.setValue("");
      }
  });
  
  $.mytextAreaID.addEventListener('blur', function(e) {
      hintText();
  });
  
  
  
  function hintText(hintText){   
      if ($.mytextAreaID.value.length == 0) {
          $.mytextAreaID.setValue(hint);
      }
  
  }
  

• TIMOB-9887

• Hi Chris,

  Thanks for the input. I actually already developed a similar solution to the Text Field, before I read the docs and found out about the hintText-property…

  I thought I'd do a little more digging this time around… ;)

  But thanks for confirming my suspicions!

  HTH

  /J

• A CommonJS module based on Dan's example:
  https://gist.github.com/2728758