Javascript 单击元素时对输入进行角度聚焦

我已将stackblitz附在下面

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

简而言之，这是我想做的两件事

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

---

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

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

然后在html中-

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

---

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

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

然后在html中-

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

在html中，添加对输入文本-firstname字段的引用，并添加一个方法来单击标签的事件-click=focusOnFirstName 在html中，添加对输入文本-firstname字段的引用，并添加一个方法来单击标签的事件-click=focusOnFirstName

---

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

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

对输入元素的模板执行ViewChild查询 在模板中的输入元素上添加事件侦听器 每当检测到keyup事件时，它将触发对字段值的检查，并更新表示字段是否为空的类属性 将触发更改检测，[NgClass]或[class]绑定将触发对元素类的更新

---

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

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

对输入元素的模板执行ViewChild查询 在模板中的输入元素上添加事件侦听器 每当检测到keyup事件时，它将触发对字段值的检查，并更新表示字段是否为空的类属性 将触发更改检测，[NgClass]或[class]绑定将触发对元素类的更新

---

在元素上的第一个焦点事件之后，是否希望标签为常量？如果输入没有值，为什么不尝试将标签返回到该位置。但是如果它有一些值，则标签应为常量，当值被删除且焦点不在时，标签应返回到原始位置。谢谢您的建议，但我正在尝试避免材质..在元素上的第一个焦点事件之后，您希望标签是常量吗？如果输入没有值，为什么不尝试标签应该回到原来的位置..但是如果它有一些值，它应该是常量，当值被删除并且焦点不在时，它应该返回到原来的位置..谢谢您的建议，但我试图避免材料..谢谢现在我能做第一部分..但你能解释一下它是如何工作的吗？当输入有一些价值时你能帮助我吗..标签应该保持在顶部谢谢它解决了..只有一件事你能建议我，如果有一种方法可以动态生成它，而不为每个输入创建单独的变量[ngModel]是跟踪输入值的完美解决方案。请确保导入forms模块，以免出现未知的指令错误：导入{FormsModule}从“@angular/forms”开始谢谢现在我可以做第一部分了。但是你能解释一下它是如何工作的吗？当输入有一些价值的时候你也能帮我吗。标签应该放在最上面谢谢它解决了问题。只有一件事你能建议我，如果有一种方法可以动态生成它，而不必为每个输入创建单独的变量[ngModel]是跟踪输入值的完美解决方案。请确保导入forms模块，以免出现未知的指令错误：从“@angular/forms”导入{FormsModule}，谢谢它几乎解决了我的问题，除了第二部分..如果有值，标签应该保持在顶部。当移除时，它应该回到原来的位置。谢谢它几乎解决了我的问题，除了第二部分。如果有值，标签应该保持在顶部。当移除时，它应该回到原来的位置。谢谢你的时间。如果你正在制作一个

---

这是一个指令，我们如何将其附加到表单上。在我的情况下，它是反应式表单。特定的输入指令将要求一个仅在父组件上可用的表单组。是否有办法克服此问题？附加的代码似乎有点混乱。您能分享stackblitz吗？谢谢您的时间。如果您将其作为一个指令我们如何将其附加到表单上。在我的例子中，它是反应式表单。特定的输入指令将要求一个仅在父组件上可用的表单组。有没有办法克服这个问题？附加的代码似乎有点混乱。您能分享stackblitz吗。？

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

      @ViewChild("firstNameField") firstNameField;

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

//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>