vue.js項(xiàng)目 el-input 組件 監(jiān)聽回車鍵實(shí)現(xiàn)搜索功能示例
基于element-ui 組件 開發(fā)的vue.js項(xiàng)目， 實(shí)現(xiàn)回車鍵發(fā)起搜索，和原生的input 標(biāo)簽使用方法不一樣：
el-input 監(jiān)聽鍵盤按下狀態(tài) 得用@keyup.enter.native,如果是非el-input 組件，可以直接用@keyup.enter
<el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIconClick" @keyup.enter.native="searchEnterFun"> </el-input> <input placeholder="搜索" type="text" @keyup.enter="searchEnterFun">
在methods方法集里，寫上監(jiān)聽的方法，當(dāng)獲取的keyCode 為13時(shí)，表示按下了回車鍵，如果需要監(jiān)聽空格或者其他鍵，換成別的鍵值
searchEnterFun:function(e){
var keyCode = window.event? e.keyCode:e.which;
// console.log('回車搜索',keyCode,e);
if(keyCode == 13 && this.input){
this.$router.push({path:'/Share?keywords='+this.input});
}
}
which 和 keyCode 屬性提供了解決瀏覽器的兼容性的方法。
keyCode屬性返回onkeypress事件觸發(fā)的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼
注意：
在 Firefox 中，keyCode 屬性在 onkeypress 事件中是無效的 (返回 0)。瀏覽器兼容問題，可以一起使用 which 和 keyCode 屬性來解決：
var keyCode = window.event ? e.keyCode:e.which;
which 屬性返回onkeypress事件觸發(fā)的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼
瀏覽器支持：谷歌、火狐、ie9、safari、歐朋
以上這篇vue.js項(xiàng)目 el-input 組件 監(jiān)聽回車鍵實(shí)現(xiàn)搜索功能示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue2安裝tailwindcss，本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vue3+vite+tdesign實(shí)現(xiàn)日歷式可編輯的排課班表填寫功能
本文介紹了如何使用Vue3和tdesign實(shí)現(xiàn)一個(gè)日歷式、可編輯的排班填寫功能,開發(fā)過程中面臨了年份和月份下拉框的實(shí)現(xiàn)、周期顯示以及可編輯日歷的樣式和數(shù)據(jù)獲取等挑戰(zhàn),感興趣的朋友一起看看吧2025-01-01
這篇文章主要為大家詳細(xì)介紹了vue+rem自定義輪播圖效果，手指觸摸左滑和右滑，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
小編之前介紹了通過vue.js計(jì)算屬性，不知道大家都學(xué)會(huì)了嗎。那這篇文章中我們將一起學(xué)習(xí)vue.js實(shí)現(xiàn)綁定class和style樣式，有需要的朋友們可以參考借鑒。2016-09-09
在本篇內(nèi)容里小編給大家分享的是關(guān)于vue登錄注冊的相關(guān)實(shí)例內(nèi)容以及寫法分析，有需要朋友們可以學(xué)習(xí)下。2019-09-09
vue 需求 data中的數(shù)據(jù)之間的調(diào)用操作
這篇文章主要介紹了vue 需求 data中的數(shù)據(jù)之間的調(diào)用操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue中使用echarts的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue項(xiàng)目實(shí)現(xiàn)會(huì)議預(yù)約功能(包含某天的某個(gè)時(shí)間段和某月的某幾天)
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)會(huì)議預(yù)約功能(包含某天的某個(gè)時(shí)間段和某月的某幾天),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2.x的父子組件之間的傳值并沒有太大的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue3父組件和子組件如何傳值的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了vue中定義全局聲明vscode插件提示找不到問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05