[TIMOB-13905] iOS: TextArea with hint text

GitHub Issue	n/a
Type	New Feature
Priority	Low
Status	Closed
Resolution	Not Our Bug
Resolution Date	2016-08-14T17:24:52.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	n/a
Labels	parity
Reporter	Matej
Assignee	Chee Kiat Ng
Created	2013-05-16T20:51:25.000+0000
Updated	2016-08-14T17:24:52.000+0000

Description

*Problem* Please can you add support of "Hint text" property in TextArea component also for iOS? Now it is working only on Android and I don't understand why. In my app I have a nice form with normal TextField's (with hint text) and on the end of the form I've got a TextArea, which is without hint text, so it looks inconsistent. There is a workaround by manually checking the values, but this is inconvenient. *Workaround*

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;
	}
});

Comments

Daniel Sefton 2013-05-17

Separated into 2 reports for iOS and Mobile Web (TIMOB-13904).
Daniel Sefton 2013-05-17

@Matej - If you'd like to help us further on this, a simple test case which demonstrates the parity would be useful. Thanks.
Matej 2013-05-17

Sorry I don't know what exactly do you want. Do you want me to use 'workaround' in test case? I am not sure if is it necessarily - example for hintext/placeholder... + I forgot. But for example I can't use 'workaround' in my application because (I wrote it already above) I've got a few TextField's in my form with HinText. Problem is that TextArea has different distance between border / text and as well TextArea has different type of font. So it doesn't looks very well... :(
Daniel Sefton 2013-05-17

Just something which shows that the hint text for TextArea is working on Android and not iOS. For your second point, I think that resembles a bigger issue. If you use hint text on Android do you have the same issue? Even with the entry text?

Matej 2013-05-19

OK, so: *app.js* (hintText sample)

 
   var win = Ti.UI.createWindow({
   	layout: "vertical",
   	backgroundColor: "gray"
   });
   
   var textField = Ti.UI.createTextField({
   	width: 250, height: 50,
   	top: 10,
   	hintText: "Hint text",
   	backgroundColor: "white"
   });
   
   var textArea = Ti.UI.createTextArea({
   	width: 250, height: 50,
   	top: 50,
   	hintText: "Hint text",
   	backgroundColor: "white"
   });
   
   
   win.add(textField);
   win.add(textArea);
   win.open();

*Screens:* (I have no idea why is font on the Android so high... ) !http://oi44.tinypic.com/2w1t9gg.jpg! *app.js* (Test only with value)

   var win = Ti.UI.createWindow({
   	layout: "vertical",
   	backgroundColor: "gray"
   });
   
   var textField = Ti.UI.createTextField({
   	width: 250, height: 50,
   	top: 10,
   	value: "Some value",
   	backgroundColor: "white"
   });
   
   var textArea = Ti.UI.createTextArea({
   	width: 250, height: 50,
   	top: 50,
   	value: "Some value",
   	backgroundColor: "white"
   });
   
   
   win.add(textField);
   win.add(textArea);
   win.open();

*Screens:* !http://oi39.tinypic.com/1qg7pi.jpg! *app.js* (Same test with values ,but I added font size/weight. You can see that font is exactly same ,but there is space in TextArea between font and border/side)

   var win = Ti.UI.createWindow({
   	layout: "vertical",
   	backgroundColor: "gray"
   });
   
   var textField = Ti.UI.createTextField({
   	width: 250, height: 50,
   	top: 10,
   	value: "Some value",
   	font: {fontSize: 20, fontWeight:"normal"},
   	backgroundColor: "white"
   });
   
   var textArea = Ti.UI.createTextArea({
   	width: 250, height: 50,
   	top: 50,
   	value: "Some value",
   	font: {fontSize: 20, fontWeight:"normal"},
   	backgroundColor: "white"
   });
   
   
   win.add(textField);
   win.add(textArea);
   win.open();

*Screen:* !http://oi39.tinypic.com/35jz47n.jpg! OK, and in the last sample I set in the TextField normal hintText and in the textArea I set custom hintText by 'workaround' + I changed color. Everything else including font size/weight is same like in the previous example. *Screen:* !http://oi39.tinypic.com/1ze8lf5.jpg!

Daniel Sefton 2013-05-20

Thanks Matej, very useful.
Matej 2014-02-21
Rene Pot 2014-10-29

This issue has not had much attention lately. It does however seem pretty trivial. Is there a way this feature could be included soon?
Trevor Chong 2015-01-14

Yes. Agreed. It is a simple feature which a lot of developers use. It would save the community a lot of work.
Hans Knöchel 2016-08-14

Unfortunately, it is no dimple feature, since iOS does not expose an API for it and Apple does not plan to do so. The simple reason is that a UITextView is not meant to have placeholder-texts natively. Because we try to stick to the native API-guidelines, we won't expose it as well. But If you still want to use it, you could do it by simply watching the focus-event of the text-field and adjust the text and color property based on the file-length. It's a UI-hack, but that's also how it is suggested by the iOS-community on the native-side. See [this StackOverflow-link](http://stackoverflow.com/questions/1328638/placeholder-in-uitextview) for more infos.

JSON Source