how to change hintText color in textField Titanium?

Question

this is my code,and I want to change the hintText Color, how to do?

    "#email":{
    width: '70%',
    left:'13%',
    font:{
        fontSize:'20sp'
    },
    color: '#fff',
    hintText:'请输入手机号',
    borderColor:'transparent',
    bottom:'2%',
    //backgroundColor:'#d9d9d9',
    backgroundColor:'transparent',
    borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED
}

The accepted answer is horrendous, please do not use that method. See answer provided by @gjerlow here: http://stackoverflow.com/a/37226098/971557 — Noel Baron, Jun 30 '16 at 16:16

gjerlow · Answer 1 · 2016-08-14T22:48:55.987

4

This can also be done using AttributedString and AttributedHintText, which supports both Android and iOS.

var emailHintText = "Your email";

var attributedEmailHintText = Titanium.UI.createAttributedString({
  text : emailHintText,
  attributes : [{
   type : Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
   range : [0, emailHintText.length],
   value : '#88817F',
  }]
 });

$.email.setAttributedHintText(attributedEmailHintText);

AttributedString will also allow you to add more attributes to your string/hintText in addition to color. Read about it in Appcelerators Documentation:

AttributedString Foreground Color

Ti.UI.AttributedString

UPDATE 15.08.16

After the Titanium SDK 5.4.0.GA release, iOS now support the property hintTextColor and the method setHintTextColor for TextFields. Read more in the Titanium SDK Release Notes for iOS

edited Aug 14 '16 at 22:48

answered May 14 '16 at 11:31

gjerlow

89
6

+1 This is the best answer, and the only one that is cross-platform-correct. Forget all that hogwash with hiding and showing elements. OP, please mark this as the correct answer. – Noel Baron Jun 30 '16 at 16:15
1

Thanks, @NoelBaron. It is also easy to make a function of it to prevent duplicate code when multiple TextFields are used or a TextField needs different hintTexts. – gjerlow Aug 03 '16 at 12:18

score 2 · Answer 2 · answered Oct 20 '16 at 11:03

2

Just add hintTextColor property.

"#email":{
    width: '70%',
    left:'13%',
    font:{
        fontSize:'20sp'
    },
    color: '#fff',
    hintText:'Hint Text',
    hintTextColor : "#787878",
    borderColor:'transparent',
    backgroundColor:'transparent',
    borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED
}

answered Oct 20 '16 at 11:03

Shima

33
7

Add some explanation with answer for how this answer help OP in fixing current issue – ρяσѕρєя K Oct 20 '16 at 11:25
This works as expected in latest SDKs.. This should now be the answer IMHO – Markive Nov 15 '18 at 05:54

score 1 · Accepted Answer · answered Mar 02 '15 at 08:35

actually you can't i tried before
here what i did to change the hint color and font
you need to create a view, textfeild and label with adding change listener on textfeild to show or hide the hint

 var mh_view = Ti.UI.createView({
    backgroundColor : "white",
    height : "40dp",
    top : "224dp",
    left : "10dp",
    right : "10dp",
    width : Ti.UI.FILL
});
var mail_hint = Ti.UI.createLabel({
    color : "#88817F",
    font : {
        fontFamily : customfont2,
        fontSize : "15dp"
    },
    left : "47dp",
    //top:"14dp",
    text : "E-mail"
});
mh_view.add(mail_hint);
var mail = Ti.UI.createTextField({
    backgroundImage : "/images/trans.png",
    width : Ti.UI.FILL,
    height : "40dp",
    top : "224dp",
    left : "10dp",
    right : "10dp",
    bubbleParent:false,
    paddingLeft : "47dp"
    // hintText:"E-mail"
});

var visible = true;
mail.addEventListener("change", function() {
    if (visible) {
        mail_hint.hide();
    } else {
        if ((mail.value).length == 0)
            mail_hint.show();
    }
    visible = !visible;

});

hope it help :)

score 0 · Answer 4 · answered Jul 16 '15 at 11:10

0

you will have to create a theme for android with such properties. you can find how to do that http://docs.appcelerator.com/platform/latest/#!/guide/Android_Themes

they have a good doccument for it

answered Jul 16 '15 at 11:10

MOIN

1
1

score 0 · Answer 5 · answered Feb 27 '16 at 23:12

For those that were searching around, you can do this using "hintTextColor", you can use it for a textfield, but I used it for a search bar, see example below:

var searchInputBox = Titanium.UI.createSearchBar({
   backgroundColor:'#fff',
   hintTextColor:'#777',
   backgroundFocusedColor: "red",
   color: "#000",
   showCancel:true,
   height: 60,
   width: "94%",
   top: 100,
   left: "3%",
   hintText: "E.g. Bananas...",
   font: { color: "#fff"},
});

I found this mentioned here in a post: https://jira.appcelerator.org/browse/TIMOB-18433

score -1 · Answer 6 · answered Mar 02 '15 at 06:06

-1

I think, Just put color:'red' it will show your text as well as hint text in red color

answered Mar 02 '15 at 06:06

M14

1,780
2
14
31

no ! it's always gray whatever the font color is . – wind Mar 02 '15 at 06:53

how to change hintText color in textField Titanium?

6 Answers6

Linked