代碼實現
<!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;