[英]Angular focus on input while clicking an element
我已经附上了下面的stackblitz
https://stackblitz.com/edit/angular-dgx3pe
我想要实现的是点击标签元素时它应该集中在输入上。因此输入:焦点类被激活。我相信它可以通过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;
}
您可以使用纯标记执行此操作。 您需要在输入中添加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>
<input #firstNameField class="input" type="text">
<label class="label" (click)="focusOnFirstName()">First Name</label>
@ViewChild("firstNameField") firstNameField;
focusOnFirstName(){
this.firstNameField.nativeElement.focus();
}
我从为条件样式请求制作更“Angular”解决方案的角度来看这个。 为此,您应该专注于将输入/标签组合滚动到自定义输入组件中。 使用原始元素作为起始模板创建组件后,您可以更有效地制定以下内容。
基本策略是使用Angular的[class]属性绑定或[NgStyle]指令有条件地应用您的样式。
<input>
字段值并更新表示字段是否为空的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.