单击元素时以角度聚焦于输入

Question

我已附上下面的 stackblitz

https://stackblitz.com/edit/angular-dgx3pe

我想要实现的是，当单击标签元素时，它应该关注输入。因此 input:focus 类被激活。我相信它可以通过 javascript/jquery 实现。但我更喜欢有角度的方式来实现这一点。

简而言之，这是我正在尝试做的两件事，

• 单击标签时将焦点放在输入元素上。
• 当焦点更改到另一个输入元素时，如果前一个元素不为空（如果输入了某个值）。标签应保持其在顶部的位置。

HTML

<input class="input" type="text">
<label class="label">Name</label>

<div>
<input class="input" type="text">
<label class="label">Name</label>
</div>

CSS

p {
  font-family: Lato;
}
.input
{
  border:none;
  border-bottom:1px solid grey;
  outline:none;
   margin-top:20%;
}
.input:focus
{
    border-bottom:1px solid orange;
}
.label
{
  position:relative;
 left:-170px;
}
.input:focus + .label
{
   bottom:20px;
}

Answer 1

1. 在 html 中，添加对输入文本的引用 - #firstNameField 并添加标签单击事件的方法 - (click)="focusOnFirstName()"

    <input #firstNameField class="input" type="text">
    <label class="label" (click)="focusOnFirstName()">First Name</label>

2. 在您的组件中声明 ViewChild 并实现单击标签字段的方法。

      @ViewChild("firstNameField") firstNameField;

      focusOnFirstName(){
        this.firstNameField.nativeElement.focus();
      }

Answer 2

您可以使用纯标记来做到这一点。您需要在输入中添加一个 id，并在标签中添加一个 for 元素

<input class="input" type="text" id="firstName">
<label class="label" for="firstName" >First Name</label>

这只是 html 规范的一部分 - 标签可以与输入关联 - 这里的开箱即用功能是，单击标签时，它将焦点设置到其关联的输入。 id 和 for 属性必须匹配才能正常工作。

对于问题的第二部分，为了重用您的 css 类 - 将匹配的变量添加到您的组件中。当变量有值时使用ngClass添加.go-top类

在组件中 -

firstName: string;

然后在html中-

  <input class="input" type="text" id="firstName" [(ngModel)]="firstName">
  <label class="label" for="firstName" [ngClass]="{'go-top': firstName}">First Name</label>

Answer 3

我是从为您的条件样式请求制定更加“角度”的解决方案的角度来看待这个问题的。 为此，您应该专注于将输入/标签组合滚动到自定义输入组件中。 使用原始元素作为起始模板创建组件后，您可以更有效地执行以下操作。

基本策略是使用 Angular 的 [class] 属性绑定或 [NgStyle] 指令有条件地应用样式。

1. 在输入元素的模板上执行 ViewChild 查询
   2. 在模板中的输入元素上添加事件监听器
   3. 每当检测到 keyup 事件时，它将触发检查您的

      <input>

      字段值并更新表示该字段是否为空的类属性
   4. 将触发更改检测，并且 [NgClass] 或 [class] 绑定将触发对元素类的更新

//component.ts

import { Component, Input, ViewChild, ElementRef } from '@angular/core'

@Component({
  selector: 'app-input',
  styleUrls: ['./input.component.css'],
  templateUrl: './input.component.html'
})

export class InputComponent{
  @Input() labelName: string = "Your Label Here"
  @ViewChild("input") myInput:ElementRef<any> //ViewChild query

  empty: Boolean = true; // this property will track whether input value is truthy

  isEmpty(){ // attached to keyup event on input element in your template file

   if (this.myInput.nativeElement.value){
      this.empty = false;
    } else{
      this.empty = true;
    }
  }

  styles(){ // attached to the [ngClass] directive binding on input element in template file
    return {
      'empty': this.empty ? true: false,
      'not-empty': this.empty ? false: true
    }
  } 

}

//component.html with [ngClass] directive

<label for="my-input" #label> {{ labelName }}
<input type="text" id="my-input" [ngClass]="styles()" (keyup) = "isEmpty()" #input>

//component.html with [style] property binding
// in this instance, empty is a reference to the property in the .ts file

<label for="my-input" #label> {{ labelName }}
<input type="text" id="my-input" [class.empty]="empty" #input>

Answer 4

请利用以下

 const inputElement: HTMLElement = document.querySelector('.class-name') as HTMLElement;
 if(inputElement){
   inputElement.focus();
 }