A Titanium Mobile implementation of a TextArea with hintText compatible with iOS

app.js

Ti.UI.setBackgroundColor('#000');

var win = Ti.UI.createWindow();
var parentView = Ti.UI.createView(); 

var HintTextArea = require('HintTextArea');

// Create a TextArea.
var aTextArea = HintTextArea.createHintTextArea({
	height : 80,
	top : 10,
	left : 40,
	width : 240,
	hintText : 'This is a hint text',
	keyboardType : Ti.UI.KEYBOARD_DEFAULT,
	returnKeyType : Ti.UI.RETURNKEY_DEFAULT,
	borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});

// Add to the parent view.
parentView.add(aTextArea);


// Create a TextArea.
var aTextArea2 = HintTextArea.createHintTextArea({
	height : 80,
	top : 110,
	left : 40,
	width : 240,
	hintText : 'This is a hint text',
	keyboardType : Ti.UI.KEYBOARD_DEFAULT,
	returnKeyType : Ti.UI.RETURNKEY_DEFAULT,
	borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
	hintTextColor : 'red'
});

// Add to the parent view.
parentView.add(aTextArea2);


// Create a TextArea.
var aTextArea3 = HintTextArea.createHintTextArea({
	height : 80,
	top : 210,
	left : 40,
	width : 240,
	hintText : 'This is a hint text',
	keyboardType : Ti.UI.KEYBOARD_DEFAULT,
	returnKeyType : Ti.UI.RETURNKEY_DEFAULT,
	borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
	value : "This is normal text"
});

// Add to the parent view.
parentView.add(aTextArea3);


win.add(parentView);
win.open();

HintTextArea.js

/**
 * @author Dario Marcelino
 */

var defaultHintTextColor = 'gray';

var filter = function (/*Object*/ source){
	var newObj = {};
	
	for(name in source){
		if(name != 'hintText' && name != 'hintTextColor'){
			newObj[name] = source[name];
		}
	}
	return newObj; // Object
};


/**
 * Initializes a TextArea with support for HintText on the iPhone
 * @param Dictionary with TextArea properties plus optional 'hintTextColor'
 * @returns Ti.UI.TextArea
 */
exports.createHintTextArea = function(/*object*/ properties){
	if(Ti.Platform.osname == 'android')
		return Ti.UI.createTextArea(properties);
	
	var newProperties = filter(properties);
	var textArea = Ti.UI.createTextArea(newProperties);
	textArea._hintText = properties.hintText;
	textArea._hintTextColor = properties.hintTextColor || defaultHintTextColor;
	textArea._color = textArea.getColor();
	
	if(textArea.value == null || textArea.value == ""){
		textArea.value = textArea._hintText;
	   	textArea.color = textArea._hintTextColor;
	}
	
	textArea.addEventListener('focus', function(e){
	    if(e.source.value == e.source._hintText){
	        e.source.value = "";
	        e.source.color = textArea._color;
	    }
	});
	textArea.addEventListener('blur', function(e){
	    if(e.source.value==""){
	        e.source.value = e.source._hintText;
	        e.source.color = textArea._hintTextColor;
	    }
	});
	
	return textArea;
}

You are the Boss

Thank you , But in this example. hintText is taking as value and submitting to database with hintext when I click on submit.

Thank you. I needed to be able to modify the hint text color for a text field and this paved the way.