Изменить цвет рамки TextField, пока он сфокусирован - PullRequest
Новая
       7

Изменить цвет рамки TextField, пока он сфокусирован

0 голосов
/ 07 июня 2019

Я рестайлинг моего кроссплатформенного приложения, созданного с помощью NativeScript + Angular, и я хочу изменить цвет границы текстового поля, когда я помещаю в него данные.

Я пробовал это, но это не работает 

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

Это часть login.component.html: 

        <label text="Email"></label>
        <TextField 
            hint="mario.rossi@gmail.com" 
            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>

Как я могу это сделать? Вот детская площадка

Ответы [ 4 ]

1 голос
/ 07 июня 2019

NativeScript не поддерживает псевдоселектор, когда текстовое поле находится в фокусе.Но вы можете просто прослушать события фокусировки и размытия, добавить / удалить класс для изменения цвета границы.

Поскольку вы используете Angular, простая директива может решить эту проблему раз для всех текстовых полей в вашем приложении.

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

Директива 

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

Образец игровой площадки

0 голосов
/ 07 июня 2019 

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>

только что удаленный контур из текстовой области!

0 голосов
/ 07 июня 2019

Добавьте это в ваш файл CSS.Надеюсь, что это работает.

 TextField:focus {
       outline: none !important;
       border-color: red;
     }
0 голосов
/ 07 июня 2019

К сожалению, его там нет по умолчанию. Однако вы можете реализовать его самостоятельно с помощью событий focus и blur.

Например:

<some-page>.xml

...
<TextField class="input-field"
    text="{{ email }}"
    keyboardType="email"
    autocapitalizationType="none"
    autocorrect="false"
    focus="onTextFieldFocus"
    blur="onTextFieldBlur" />
...
* +1012 *<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;
}
...
...