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

@AqeelArshad AqeelArshad commented Jul 8, 2012

You are the Boss

@pundu55

This comment has been minimized.

Copy link

@pundu55 pundu55 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

@pagespec1 pagespec1 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