代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 监听回车键实现搜索功能示例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="searchEnterFun" placeholder="搜索">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
},
methods: {
searchEnterFun:function(e){
// 使用 which 和 keyCode 属性来解决兼容问题
var keyCode = window.event? e.keyCode:e.which;
var val = e.target.value;
console.log('回车搜索',keyCode,e);
if(keyCode == 13 && val){
alert(val);
}
}
}
})
</script>
</body>
</html>
注意
-
which和keyCode属性提供了解决浏览器的兼容性的方法。 -
keyCode属性返回onkeypress事件触发的键的值的字符代码，或者onkeydown或onkeyup事件的键的代码 -
在 Firefox 中，keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题，可以一起使用 which 和 keyCode 属性来解决：
var keyCode = window.event ? e.keyCode:e.which;