vue點擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法
更新時間：2018年08月25日 09:34:55 作者：wangjuhi
今天小編就為大家分享一篇vue點擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1.遇到問題：
需要做一個點擊input彈出帶搜索的鍵盤。
解決：
input的type="search",可彈出帶搜索的鍵盤。并監(jiān)聽搜索按鈕，請求數(shù)據(jù)
<input @keyup.13="show()" type="search">
2.但是又遇到一個新的問題：
點擊搜索之后鍵盤沒有收回。
解決：
通過$refs獲取input
監(jiān)聽搜索按鈕，添加.blur()
<input @keyup.13=show() type="search" ref="input1">
show(){
this.$refs.input1.blur();
}
3.測試時發(fā)現(xiàn)ios無法彈出帶搜索的鍵盤
解決：
給input外加一層from
<form action="javascript:return true;">
<input @keyup.13=show() type="search" ref="input1">
</form>
show(){
this.$refs.input1.blur();
}
以上這篇vue點擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Django與Vue語法的沖突問題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了vue使用refs獲取嵌套組件中的值過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue使用原生swiper代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue項目設置活性字體過程(自適應字體大小)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue?是如何將一份模板轉換為真實的?DOM?節(jié)點的,又是如何高效地更新這些節(jié)點的呢,這些都離不開虛擬dom這個概念,下面我們就來了解下虛擬dom這個概念以及它是什么吧2024-01-01
vue3使用vuex實現(xiàn)頁面實時更新數(shù)據(jù)實例教程(setup)
在前端開發(fā)中往往會遇到頁面需要實時刷新數(shù)據(jù)的情況,給用戶最新的數(shù)據(jù)展示,這篇文章主要給大家介紹了關于vue3使用vuex實現(xiàn)頁面實時更新數(shù)據(jù)(setup)的相關資料,需要的朋友可以參考下2022-09-09
在vue中使用el-tab-pane v-show/v-if無效的解決
這篇文章主要介紹了在vue中使用el-tab-pane v-show/v-if無效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue.js中methods watch和computed的區(qū)別示例詳解
methods,watch和computed都是以函數(shù)為基礎的,但各自卻都不同,這篇文章主要給大家介紹了關于vue.js中methods watch和computed區(qū)別的相關資料,需要的朋友可以參考下2021-08-08
vite.config.ts配置之自動導入element-puls方式
這篇文章主要介紹了vite.config.ts配置之自動導入element-puls方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue組件跨層級獲取組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07