Блог

Главная - Вопросы по программированию - привязка ключа.ввод с помощью tab с помощью angular

привязка ключа.ввод с помощью tab с помощью angular

#html #angular #typescript

#HTML #angular #машинописный текст

Вопрос:

кто-нибудь знает, как я могу привязать keyup.enter proproty к вкладке клавиатуры? я имею в виду, что я хочу, чтобы при вводе значения в первом поле моей формы оно появлялось во втором поле. Нравится:

 <form>
<label for="xxx">first:
 <input type="text" id="first" name="first" (keyup.enter)="enterFirst(firstName)">
</label>
<label for="xxx">second:
 <input type="text" id="second" name="second" (keyup.enter)="enterSecond(lastName)">
</label>
.
.
.
<button type="button" class="btn btn-success" (click)="sendNames(xxx)">valid</button>
</form>

Поэтому я хотел бы иметь возможность нажимать на поле вторым, когда я указываю имя и нажимаю enter.

У кого-нибудь есть идея? заранее спасибо

Ответ №1:

Это должно сработать, хотя это ванильный JS:

 <input type="text" id="first" name="first" onkeyup="if (event.keyCode == '13') {enterFirst(this)}">

(ОТРЕДАКТИРОВАНО: заменено «FirstName» на «this»)

Комментарии:

1. сначала спасибо за ваш ответ @Lemindoge. но когда у меня появляется эта ошибка на консоли (индекс): 14 Неперехваченная ошибка ссылки: enterFirst не определен в HTMLInputElement.onkeyup ((индекс):14)

2. О, замените «FirstName» на «this». Если это не сработает, я думаю, что «enterFirst», вероятно, не существует в вашем коде.

Ответ №2:

HTML:

    <h1>Here we will try to bind  the keyup.enter with Tab</h1>
   <div class="container">
   
     <h2>Please enter datas an click on enter</h2>
     <form>
       <div class="row">
         <div class="form-group col">
           <label for="fname">Enter your firstname:</label>
           <input type="text" class="form-control" placeholder="enter your firstname and click enter"
         id="fname" name="fname" onkeyup="if (event.keyCode == '13') {enterFirst(this)}">
         </div>
         <div class="form-group col">
           <label for="lname">Enter your lastname:</label>
           <input type="text" class="form-control" placeholder="enter your lastname and click enter"
         id="lname" name="lname" onkeyup="if (event.keyCode == '13') {enterLast(this)}">
         </div>
       </div>
       <button type="button" class="btn btn-success" (click)="sendData()">submit</button>
     </form>
   
   </div>

Ts:

 import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angulartest';
  public firstname: string;

  constructor(){}

  ngOninit(){

  }

  enterFirst(firstname){
    console.log(firstname);
  }

  sendData(){

  }
}

Я написал это просто для того, чтобы посмотреть, смогу ли я перейти к полю lastname, нажав enter после firstname