之前在做Angular Todolist 项目的时候，遇到一个小问题是，输入框需要敲击回车，触发内容输入，这部分功能Angular 封装在了ng-submit 指令中了。ng-submit 默认的就是敲击回车提交表单。那么我们回到原生JS 如何实现呢，很简单，待我慢慢道来~~
本文实现了两种小效果，一种是输入框敲击回车，显示输入内容，一个是输入框输入内容，即可同步显示，有点类似Angular 的双向数据绑定
HTML
<div class="wrapper">
<h3>单击回车，输入内容并显示</h3>
<input type="text" class="type">
<div class="show"></div>
<h3>随时输入，随时显示</h3>
<input type="text" class="type type1">
<div class="show1"></div>
</div>
CSS
.wrapper{
background-color: #eee;
width: 600px;
margin: 20px auto;
text-align: center;
}
.type{
display: inline-block;
width: 300px;
margin-bottom: 20px;
font-size: 16px;
padding: 8px;
}
代码非常的简单，这就是一个小的demo。接下来来到了JavaScript部分
JavaScript
var input = document.querySelector(".type");
var show = document.querySelector(".show");
input.addEventListener("keydown",function(e){
if(e.keyCode == 13){
var content = this.value;
show.innerHTML = content;
}
})
input.addEventListener("keyup",function(){
var content = this.value;
if(content === ""){
show.innerHTML = "";
}
});
var inputAgain = document.querySelector(".type1");
var show1 = document.querySelector(".show1");
inputAgain.addEventListener("keyup",function(){
var contents = this.value;
show1.innerHTML = contents
})
敲击回车，只需判断事件绑定时候的 e 对象的 keyCode 属性值，即可获得用户敲击的是哪个按键，而 13 正好对应回车，从而就完成了这个效果。
第二个demo 内容随着敲击实时显示， 是利用了 JavaScript 事件中的 keyup 事件。此事件针对的就是输入内容时候，用户只要敲击完成，放松按键，就会触发这个事件。所以我们在这个事件绑定一个函数，就可以用户输入完一个内容，放松按键，立刻取得这个值，然后显示出来即可。
第二个知识点
这里用到的点实际只需加一个敲击按键为回车即可，不过这只是，本文关注的知识点之一，还有一个点也平时容易忽略。我们看上面的JavaScript 代码能发现，获取文本框输入内容的饿时候，我们使用的是 输入框的 dom 元素的 .value 属性。其实最开始，我使用的是 getAttribute 方法，以为用这个方法可以获取。但一直显示 null，令我有些不解，百度了下，换为 .value 就可以。 接下来，。。。
问题描述完了，我的demo 是实现了，但是 .value 和 getAtttribue 什么区别呢 ？
.value
此君获取的是，输入框 dom 对象value 属性的实时值，即 你最初设定的值如果有改变，他也能得到最新值
getAttribute
它从名称看，取得的是 dom 对象的 value 属性，遗憾的是，它只能得到页面渲染后，DOM对象最初的值，那么上面的demo 最初未设置初始值，自然，我开始使用getAttribute 方法得到的是，null 了。
参考内容
在这里加上百度到的 dom.value 和 dom.getAttribute 的区别的回答，仅供参考