Angualr 输入文本框监听enter回车键和esc键方法使用（附常用的键盘事件对应的键码）

S筱潇S四维Smile

于 2018-12-14 16:09:43 发布

阅读量2.8k

点赞数 2

分类专栏： Angular

本文链接：https://blog.csdn.net/qq_29483485/article/details/85005325

版权

本文介绍如何在Angular中监听输入文本框的enter回车键和esc键事件，提供示例代码，并列出常见键盘事件的键码。

摘要由CSDN通过智能技术生成

示例代码：

HTML

<input class="form-control form-control-sm" id="projectName" type=text 
    [(ngModel)]="newProjectName" 
    placeholder="请输入长度小于30的项目名称"   
    (keyup)="projectNameChanged($event)">

ts:

import { Component, OnDestroy, OnInit, ElementRef } from "@angular/core";

export class DashboardComponent implements OnInit, OnDestroy {

  constructor(
    private el: ElementRef
  ) {}

  projectNameChanged(e){

  	if(this.newProjectName.length>30){
        this.newProjectName = this.newProjectName.slice(0,30)
    }

    let keycode = window.event ? e.keyCode : e.which;

    if(keycode == 13){//回车键
      this.createProject();
      this.el.nativeElement.querySelector("#close").click();
    }

    if(keycode == 27){//esc键
      t