Day 28：开始来学资料系结：使用目前所学，来个简单实作吧！（二）

前一篇，我们完成了需求一：

1. 当使用者在关键字搜寻这个 input 输入文字时，要在输入框的正下方显示正在输入的字元数。

今天我们要接着完成需求二：

2. 当使用者在输入框按下 esc 键时，会清空输入框的内容。

首先，我们一样在 input 标签上新增一个 keyup 事件，并绑定到一个清空文字的方法：

(keyup)="clearText($event)"

在 AppComponent 里 clearText 方法中的 $event 型别一样是 KeyboardEvent。

接下来我们要抓取 esc 按键，因为我们要透过判断式，来判断使用者是否按下 esc 按键，才会触发 clearText 方法。因此我们要先在方法里印出 $event 的资讯。

切换到网页，我们先在 input 框里，按下 esc 键，此时在开发人员工具中，会印出这个事件的资讯，我们需要找到一个叫做 keyCode 的 property。

我们可以从上图中看到，key property 是 Escape，也就是 esc 键，而 keyCode 则是 27，因此我们可以在 clearText 方法中使用判断式，如下图：

接着我们同样要取得 input 的 value 及 value 的长度。

接着在判断式里，把 input 的 value 及 length 清空。

切换到网页，先在 input 里输入文字。

接着按 esc 键，我们可以看到 input 清空了，字元数也归零了。

以上，我们达成了需求二，But！

眼尖的朋友应该有注意到，刚才在使用 keyCode 时，程序码有点怪异，查看了讯息，竟然写着：

这是什麽意思，我其实不清楚，所以我要试着找另一种解决方法，下一篇我们会来探讨另一种写法。

本篇写法，如果有前辈、朋友能协助解释，并且在现有写法基础下，提供修正的解法，还请不吝指教，谢谢！若我之後有找到想关的资讯、解法，也会更新在本文章中。