下面我们再测试一下处理键盘的交互行为，比如在这个页面上可以添加一个文本框元素，用户在里面可以输入一些文字内容，按下回车以后，将这个文本框里输入的内容作为这个标题的文本内容。

打开网页文档，我们先给这行文字放到一组 p 标签里面，p 表示 paragraph，也就是段落标签，每一段文字都可以使用一组 p 标签包装一下。浏览器默认会在段落之间添加点外边距。

然后在下面再添加一个文本框元素，要用的是 input 元素，再把这个元素的 type 属性，也就是类型属性的值设置成 text，意思是需要的是可以输入文本的文本框元素。再用 placeholder 属性设置一下占位符文字，比如输入标题，这样在文本框里没有内容的时候，就会显示这个占位符文字。

脚本

打开文档引用的脚本文件，这里我们需要先找到页面上的这个文本框元素，声明一个 titleInput，它的值可以用一下 document 这个对象上面的 querySelector，用选择器的形式找到页面上的某个元素，这个选择器可以这样写，input[type=text] 意思是找到 type 属性的值 text 的 input 元素。

下面可以监听一下这个元素上的键盘事件，用一下 titleInput 这个元素上面的 addEventListener 添加一个事件的监听器，要监听的事情的名字是 keydown，当在文本框里按下按键的时候就会触发这个事件。

提供一个事件的处理器，一个函数，上面添加一个 event 参数，它的值就是 keydown 这个事件相关的数据。我们可以先在浏览器的控制台上输出这个 event 参数检查一下。

测试

回到浏览器，刷新页面，现在页面上就会显示一个文本框元素，用户可以在里面输入内容，你会发现在它里面每次按下按键的时候都会在控制台上输出一个事件对象。这里显示这个事件对象的类型是 KeyboardEvent，说明它是一个跟键盘相关的事件。

处理器

这种事件里面也有很多有用的数据，比如 key 这个属性的值就是用户按下的按键。再找到 target 这个属性，它的值是发生这个事件的元素，在这个 target 属性里面，找到它的 value 这个属性，它个属性的值，就是当前这个文本框元素里的值。

知道这些以后，我们再去处理一下这个 keydown 事件的处理器，在它里面，用 if 判断一下 event 这个对象里的 key 这个属性的值，是不是等于 Enter，三个等号，表示要比较两者是否相等。event 里的 key 属性的值是用户按下去的按键，Enter 这个按键就是回车键。

后面加上一组大括号，如果相等就会执行大括号里的代码，在这里我们可以设置一下 brand 这个元素的 innerText 属性的值，让它等于文本框当前的值，也就是 event.target 里的 value 这个属性的值。

测试

在浏览器再测试一下，刷新页面，在文本框里输入一些内容，然后按下回车键，你会发现在文本框里输入的值，现在会作为标题的文本内容。