vue?input組件如何設(shè)置失焦與聚焦
更新時間：2022年10月25日 10:15:07 作者：菜得扣腳.
這篇文章主要介紹了vue?input組件如何設(shè)置失焦與聚焦，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue input組件設(shè)置失焦與聚焦
我在iview-admin這個后臺管理系統(tǒng)中，使用input輸入框失焦時觸發(fā)了一個axios請求，但是，當(dāng)我從其它頁面，攜帶input輸入框的數(shù)據(jù)進(jìn)入該頁面，進(jìn)行數(shù)據(jù)填充的時候發(fā)現(xiàn)，數(shù)據(jù)填充沒有問題，但是因為沒有觸及到失焦事件，所以axios請求沒有觸發(fā)
把失焦事件改為@on-change事件也觸發(fā)不了，所以我就在接收到其他頁面的數(shù)據(jù)的同時，手動執(zhí)行了聚焦與失焦事件，代碼如下:
這是input輸入框的內(nèi)容：
<Input ref="input" v-model="inputData" @on-blur="inputChange" placeholder="請輸入..."/>
設(shè)置聚焦與失焦
this.$refs.input.focus(); ? ? ?// 聚焦 ? this.inputData = '111'; ?// 給輸入框賦值 ? this.$refs.input.blur(); ? // 失焦
當(dāng)然，在vue給出的官網(wǎng)文檔中，也可以指定聚焦的位置，例如：
this.$refs.input.focus({
? ? cursor: 'start' ? ?// 聚焦在文本的開始位置
});所以，請具體需求，具體使用。
回車鍵讓input失焦讓下一個input聚焦
最近項目中需要一個功能就是在一個input中輸入完成后按下回車鍵自動跳轉(zhuǎn)到下一個input框，讓下一個input框自動聚焦
代碼如下
**html**
<el-form
ref="form"
:model="form"
>
<el-form-item label-width="10px">
<el-input
v-model="form.username"
placeholder="請輸入姓名"
@blur="nextInput()"
@keyup.enter.native="nextInput($event)"
></el-input>
</el-form-item>
<el-form-item label-width="10px">
<el-input
ref="password"
v-model="form.password"
placeholder="請輸入密碼"
></el-input>
</el-form-item>
</el-form>**js**
data(){
form:{
username:'',
password:''
}
}
methods:{
nextInput (event) {
if (event) {
event.target.blur()
this.$refs.password.focus()
}
},
}這樣就可以進(jìn)行失焦聚焦，如果有多個input框?qū)崿F(xiàn)方式相同
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3實現(xiàn)vueFLow流程組件的詳細(xì)指南
VueFlow是一個專門為Vue.js框架設(shè)計的交互式可視化庫,它允許開發(fā)者輕松創(chuàng)建和管理復(fù)雜的圖形模型,如流程圖、狀態(tài)機(jī)、組織結(jié)構(gòu)圖等,本文給大家介紹了Vue3實現(xiàn)vueFLow流程組件的詳細(xì)指南,需要的朋友可以參考下2024-11-11
這篇文章主要為大家介紹了vue3自定義插件的作用場景及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了如何在Vue中使用protobuf，protobuf是由google推出的和語言無關(guān)和平臺無關(guān)，幾乎支持當(dāng)前的大部分語言，如JavaScript,下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-03-03
這篇文章主要介紹了Vue項目打包部署到apache服務(wù)器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要為大家介紹了Vue多重文字描邊組件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了vue 動態(tài)組件用法,結(jié)合實例形式總結(jié)分析了vue 動態(tài)組件基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下2020-03-03
本文主要介紹了Vite熱更新失效的問題解決,原因是文件夾和文件名大小寫不一致,下面就來解決一下次問題,感興趣的可以了解一下2024-08-08
Vite?vue3多頁面入口打包以及部署踩坑實戰(zhàn)
因為我們公司的項目是多頁面應(yīng)用,不同于傳統(tǒng)單頁面應(yīng)用,一個包就可以了,下面這篇文章主要給大家介紹了關(guān)于Vite?vue3多頁面入口打包以及部署踩坑的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Vue中父子組件的值傳遞與方法傳遞，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09