ค้นหาเว็บไซต์

javascript - Angular โฟกัสที่อินพุตขณะคลิกที่องค์ประกอบ

ฉันได้แนบ stackblitz ไว้ด้านล่าง

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

สิ่งที่ฉันพยายามทำให้สำเร็จคือเมื่อคลิกที่องค์ประกอบป้ายกำกับ มันควรจะโฟกัสไปที่อินพุต ดังนั้นคลาส input:focus จะถูกเปิดใช้งาน สิ่งที่ฉันเชื่อคือมันสามารถทำได้ผ่าน javascript/jquery แต่ฉันชอบวิธีของ Angular ในการทำสิ่งนี้

สรุปแล้ว นี่คือสองสิ่งที่ฉันพยายามทำ

  • ให้โฟกัสที่องค์ประกอบป้อนข้อมูลเมื่อคลิกที่ป้ายกำกับ
  • เมื่อโฟกัสถูกเปลี่ยนไปยังองค์ประกอบการป้อนข้อมูลอื่นและถ้าองค์ประกอบก่อนหน้าไม่ว่างเปล่า (หากมีการพิมพ์ค่าใดค่าหนึ่งเข้าไป) ป้ายควรรักษาตำแหน่งของมันที่ด้านบน

เอชทีเอ็มแอล

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

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

ซีเอสเอส

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;
}

คำตอบ #1

  1. ใน HTML ให้เพิ่มการอ้างอิงถึงข้อความป้อนข้อมูลของคุณ - #firstNameField และเพิ่มเมธอดให้กับอีเวนต์คลิกของป้ายกำกับ - (click)="focusOnFirstName()"
    <input #firstNameField class="input" type="text">
    <label class="label" (click)="focusOnFirstName()">First Name</label>
  1. ในคอมโพเนนต์ของคุณ ประกาศ ViewChild และสร้างเมธอดเพื่อคลิกที่ฟิลด์ป้ายชื่อ
      @ViewChild("firstNameField") firstNameField;

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

คำตอบ #2

คุณสามารถทำสิ่งนี้ด้วยมาร์กอัปบริสุทธิ์ คุณต้องเพิ่ม id ให้กับ input และเพิ่ม for ให้กับ label

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

บทความที่เกี่ยวข้อง