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

聚焦文本字段时，NativeScript不支持任何伪选择器。但是您可以只听焦点和模糊事件，添加/删除用于更改边框颜色的类。

由于您使用的是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 2

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

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

Answer 3

不幸的是，默认情况下它不存在。但是，您可以自己通过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 4

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>

只是从文本区域中删除了轮廓！

Answer 5

将此添加到您的CSS文件。希望它能工作。

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

聚焦时更改TextField的边框颜色

5 个答案: