聚焦时更改 TextField 的边框颜色答案

【问题标题】：Change border color of TextField while focused聚焦时更改 TextField 的边框颜色
【发布时间】：2019-06-07 08:59:46
【问题描述】：

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

【问题讨论】：

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers。请在提出问题时提供您的问题的minimal reproducible example，并在发布之前阅读How to Ask。
现在可以了吗？还是您需要更多信息？
为什么它不起作用，告诉我一个原因？
因为我在里面写的时候，边框颜色没有变化。它保持默认颜色
使用输入而不是文本字段。输入[type="text"]:focus{ 边框颜色：红色； }

标签： nativescript nativescript-angular

【解决方案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

【讨论】：

谢谢！如果我想在我的所有组件中使用此功能，我可以将指令文件放在 app 文件夹中吗？
你熟悉 Angular 吗？如果您使用延迟加载模块，请将指令放在共享模块上。如果您的模块提前加载，则将其添加到应用模块可能会起作用。
为了补充以上内容，我按照教程here 正确设置了共享模块并提供了可用的指令。

【解决方案2】：

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

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

【讨论】：

【解决方案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;
}
...

【讨论】：

我使用的是 Angular，所以我的页面组件不是 .xml，而是 .html。我尝试了这段代码，但 id 对我不起作用。
创建一个简单的游乐场，尝试获得更准确的帮助。是的，在您的原始帖子中，您并没有指出您正在使用 Angular ☹️。
我添加了标签 Angular，但仍然有人删除了该标签。一有时间，我就会创建一个 Playground。
这是我的Playground，如果你知道它为什么不起作用，请告诉我，我快疯了！

【解决方案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;
}

&lt;textarea&gt;&lt;/textarea&gt;

刚刚从 textarea 中删除了轮廓！

【讨论】：

【解决方案5】：

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

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

【讨论】：

尝试使用 textarea
NativeScript 不支持任何伪选择