聚焦时更改 TextField 的边框颜色

Question

我正在重新设计我使用 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>

我该怎么办？这是 Playground

Answer 1

不幸的是，它默认不存在。但是，您可以使用 focus 和 blur 事件自行实现。

例如：

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

Answer 2

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>

刚刚从 textarea 中删除了轮廓！

Answer 3

将此添加到您的 css 文件中。希望它有效。

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

Answer 4

当文本字段获得焦点时，NativeScript 不支持任何 pseudo-selector。但是你可以简单地听 focus 和 blur 事件，添加/删除一个 class 来改变边框颜色。

由于您使用的是 Angular，一个简单的指令就可以一次性解决您应用中所有 TextField 的这个问题。

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

Playground Sample

Answer 5

现在您可以使用 css 中的焦点事件并更改边框颜色。
如果这是您的 TextField：
<TextField class="input"></TextField>
css 规则将是：

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

聚焦时更改 TextField 的边框颜色

Change border color of TextField while focused

nativescript

nativescript-angular