vue點(diǎn)擊input彈出帶搜索鍵盤(pán)并監(jiān)聽(tīng)該元素的方法
更新時(shí)間：2018年08月25日 09:34:55 作者：wangjuhi
今天小編就為大家分享一篇vue點(diǎn)擊input彈出帶搜索鍵盤(pán)并監(jiān)聽(tīng)該元素的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
1.遇到問(wèn)題：
需要做一個(gè)點(diǎn)擊input彈出帶搜索的鍵盤(pán)。
解決：
input的type="search",可彈出帶搜索的鍵盤(pán)。并監(jiān)聽(tīng)搜索按鈕，請(qǐng)求數(shù)據(jù)
<input @keyup.13="show()" type="search">
2.但是又遇到一個(gè)新的問(wèn)題：
點(diǎn)擊搜索之后鍵盤(pán)沒(méi)有收回。
解決：
通過(guò)$refs獲取input
監(jiān)聽(tīng)搜索按鈕，添加.blur()
<input @keyup.13=show() type="search" ref="input1">
show(){
this.$refs.input1.blur();
}
3.測(cè)試時(shí)發(fā)現(xiàn)ios無(wú)法彈出帶搜索的鍵盤(pán)
解決：
給input外加一層from
<form action="javascript:return true;">
<input @keyup.13=show() type="search" ref="input1">
</form>
show(){
this.$refs.input1.blur();
}
以上這篇vue點(diǎn)擊input彈出帶搜索鍵盤(pán)并監(jiān)聽(tīng)該元素的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解vue-cli 2.0配置文件(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要介紹了vue中使用rem布局的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3.5中響應(yīng)式Props解構(gòu)的編譯原理
在Vue3.5版本中,響應(yīng)式Props的解構(gòu)功能正式轉(zhuǎn)正,該功能允許即使在解構(gòu)后也不丟失響應(yīng)性,文通過(guò)編譯階段的處理,如何保持解構(gòu)后的props變量仍保持響應(yīng)性,編譯過(guò)程中的defineProps宏函數(shù)處理,通過(guò)AST和上下文操作實(shí)現(xiàn)變量替換,從而讓解構(gòu)后的變量在運(yùn)行時(shí)維持響應(yīng)式狀態(tài)2024-09-09
vue filter 過(guò)濾器處理數(shù)據(jù)的作用,使用位置:mustache插值和v-bind表達(dá)式，過(guò)濾器用于文本轉(zhuǎn)換,復(fù)雜的數(shù)據(jù)處理則用computed，這篇文章主要介紹了Vue中的過(guò)濾器（filter）,需要的朋友可以參考下2022-11-11
vue3的父?jìng)髯訂?wèn)題(單項(xiàng)數(shù)據(jù)流)
這篇文章主要介紹了vue3的父?jìng)髯訂?wèn)題(單項(xiàng)數(shù)據(jù)流)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue解決一個(gè)方法同時(shí)發(fā)送多個(gè)請(qǐng)求的問(wèn)題
今天小編就為大家分享一篇vue解決一個(gè)方法同時(shí)發(fā)送多個(gè)請(qǐng)求的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在Vue中,實(shí)現(xiàn)圖片或組件的平鋪布局并允許用戶(hù)進(jìn)行修改,可以通過(guò)數(shù)據(jù)綁定、模板編寫(xiě)與交互設(shè)計(jì)來(lái)實(shí)現(xiàn)圖片平鋪,使用v-for指令和動(dòng)態(tài)組件,可以創(chuàng)建可編輯的組件平鋪布局,允許用戶(hù)通過(guò)點(diǎn)擊觸發(fā)編輯操作,通過(guò)外部編輯面板修改屬性后保存更改2024-10-10
基于Vue開(kāi)發(fā)一個(gè)很火的卡片動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了如何基于Vue開(kāi)發(fā)一個(gè)很火的卡片動(dòng)畫(huà)效果,大致包含兩個(gè)效果,光的跟隨效果還有卡片傾斜像?3D?的效果,感興趣的可以了解一下2024-02-02
Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
Vue3 封裝 element-plus 圖標(biāo)選擇器實(shí)現(xiàn)步驟
這篇文章主要介紹了Vue3 封裝 element-plus 圖標(biāo)選擇器,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09