CODEWITHSUNDEEP
titaniumtitanium-alloytitanium-android
wind
wind

Reputation: 440

how to change hintText color in textField Titanium?

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
}

Upvotes: 2

Views: 3620

Answers (6)

Shima
Shima

Reputation: 33

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
}

Upvotes: 2

gjerlow
gjerlow

Reputation: 89

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

Upvotes: 4

Simon
Simon

Reputation: 1125

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

Upvotes: 0

MOIN
MOIN

Reputation: 1

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

Upvotes: 0

Antwan
Antwan

Reputation: 3876

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 :)

Upvotes: 1

M14
M14

Reputation: 1810

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

Upvotes: -1

Related Questions