CODEWITHSUNDEEP
nativescriptnativescript-angular
gsarme
gsarme

Reputation: 135

Change border color of TextField while focused

I'm restyling my cross-platform app made with NativeScript + Angular and I want to change the border color of a textfield when I'm putting data on it.

I've tried this but it doesn't work

TextField {
  margin-bottom: 10;
  border-radius: 4;
  background: #FFFFFF;
  border-width: 0.5;
  border-color: #C4C4C4;
  box-sizing: border-box;
}

TextField:focus{
  border-color: red;
}

This is a part of login.component.html:

        <label text="Email"></label>
        <TextField 
            hint="[email protected]" 
            keyboardType="email" 
            autocorrect="false"
            autocapitalizationType="none" 
            [(ngModel)]="user.email" 
            class="input"></TextField>
        <label text="Password"></label>
        <TextField
            hint="Password"
            secure="true"
            [(ngModel)]="user.password"
            class="input"></TextField>

How can I do? Here is the Playground

Upvotes: 1

Views: 5816

Answers (5)

Saharis9988
Saharis9988

Reputation: 512

Now you can use the focus event from css and change the border color.
if this is your TextField:
<TextField class="input"></TextField>
the css rule will be:

.input:focus{
    border-color: blue;
}

Upvotes: 2

Manoj
Manoj

Reputation: 21908

NativeScript doesn't support any pseudo-selector while text field is focused. But you could simply listen to focus and blur events, add / remove a class for changing border color.

Since you are using Angular, a simple directive could solve this problem once in for all TextFields in your app.

HTML

<ScrollView class="page">
    <StackLayout class="form">
        <TextField appHighlightBorder class="m-10 input input-border"
            hint="First Name"></TextField>
        <TextField appHighlightBorder class="m-b-10 m-x-10 input input-border"
            hint="Last Name"></TextField>
        <TextField appHighlightBorder class="m-b-10 m-x-10 input input-border"
            hint="Email"></TextField>
    </StackLayout>
</ScrollView>

CSS

.form .input-border.focus {
    border-color: red;
}

Directive

import { Directive, ElementRef, OnDestroy, Renderer2 } from '@angular/core';

import { TextField } from 'tns-core-modules/ui/text-field';

@Directive({
    selector: '[appHighlightBorder]'
})
export class HighlightDirective implements OnDestroy {

    private removeFocusEvent: () => void;
    private removeBlurEvent: () => void;

    constructor(private elementRef: ElementRef, private renderer: Renderer2) {
        this.removeFocusEvent = this.renderer.listen(elementRef.nativeElement, TextField.focusEvent, () => {
            renderer.addClass(elementRef.nativeElement, 'focus');
        });
        this.removeBlurEvent = this.renderer.listen(elementRef.nativeElement, TextField.blurEvent, () => {
            renderer.removeClass(elementRef.nativeElement, 'focus');
        });
    }

    ngOnDestroy() {
        this.removeFocusEvent();
        this.removeBlurEvent();
    }
}

Playground Sample

Upvotes: 4

vcs
vcs

Reputation: 1

Add this to your css file. Hope it works. 

 TextField:focus {
       outline: none !important;
       border-color: red;
     }

Upvotes: -1

adel
adel

Reputation: 3507

textarea {
  margin-bottom: 10;
  border-radius: 4;
  background: #FFFFFF;
	outline:0;
  border-width: 0.5;
  border-color: #C4C4C4;
  box-sizing: border-box;
}

textarea:focus{
  border-color: red;
}
<textarea></textarea>

just removed outline from textarea!

Upvotes: -1

ych
ych

Reputation: 2075

Unfortunately, it is not there by default. However, you could implement it by yourself with focus and blur events.

For example:

<some-page>.xml

...
<TextField class="input-field"
    text="{{ email }}"
    keyboardType="email"
    autocapitalizationType="none"
    autocorrect="false"
    focus="onTextFieldFocus"
    blur="onTextFieldBlur" />
...

<some-page>.ts

...
const focusedPseudoClass = "focused";

export function onTextFieldFocus(args: EventData) {
    const textField = <TextField>args.object;
    textField.addPseudoClass(focusedPseudoClass);
}

export function onTextFieldBlur(args: EventData) {
    const textField = <TextField>args.object;
    textField.deletePseudoClass(focusedPseudoClass);
}
...

<some-page>.css

...
.input-field {
  border-bottom-color: gray;
  border-bottom-width: 1;
}
.input-field:focused {
  border-bottom-color: red;
}
...

Upvotes: 0

Related Questions