Swathi
Swathi

Reputation: 87

How to remove border color for textfield in titanium?

I have created a custom component, that text box has a pen icon on left(because leftbutton wont support in HTML5/WEB). Here is my code snippet

    var bg = Ti.UI.createView({
        height : app.platform.isAndroid ? 35 : 31,
        top : 50,
        width:"94%",
        backgroundColor : "white",
        layout:"horizontal"
    });

    var leftBtnWeb = Ti.UI.createButton({
        backgroundImage : app.dir + "img/icons/pen.png",
        width : 25,
        top : 8,
        height : 16,
        touchEnabled : false,
    });
    bg.add(leftBtnWeb);

    input = Ti.UI.createTextField({
        // top : 5,
        width:'88%',
        // left : 2,
        // right : 20,
        height : 25,
        font : {
            fontSize : "16dp"
        },
        autocorrect : false,
        returnKeyType : Ti.UI.RETURNKEY_DONE,
        clearButtonMode : Ti.UI.INPUT_BUTTONMODE_ALWAYS,
        hintText:"test",
        backgroundColor:'transparent',
        zIndex : 10,
        borderColor : "transparent",
        backgroundSelectedColor : "transparent",
        backgroundFocusedColor : "transparent",
        backgroundImage : "transparent",
        focusedColor : "transparent",
        borderStyle : Ti.UI.INPUT_BORDERSTYLE_NONE

    }); 
    bg.add(input);`

when I get focus on textfield, I got blue border, can any one let me know how to remove that border when focused.

Thanks in Advance, Swathi.

Upvotes: 0

Views: 698

Answers (1)

Robin Ellerkmann
Robin Ellerkmann

Reputation: 2113

My first idea would be to attach a custom focus event listener to your textfield and set the color of your border again.

input.addEventListener('focus', function() {
    borderStyle : Ti.UI.INPUT_BORDERSTYLE_NONE
    this.hasFocus = true;
});

Another thing you could try is setting your backgroundColor to transparent like this:

backgroundColor : 'transparent'

Upvotes: 2

Related Questions