Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Titanium Mobile implementation of a TextArea with hintText compatible with iOS
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();
/**
* @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;
}
@AqeelArshad

This comment has been minimized.

Copy link

commented Jul 8, 2012

You are the Boss

@pundu55

This comment has been minimized.

Copy link

commented Mar 16, 2014

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

@pagespec1

This comment has been minimized.

Copy link

commented Feb 22, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.