快捷導(dǎo)航

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)機、組織結(jié)構(gòu)圖等,本文給大家介紹了Vue3實現(xiàn)vueFLow流程組件的詳細(xì)指南,需要的朋友可以參考下
2024-11-11
vue3自定義插件的作用場景及使用示例詳解
這篇文章主要為大家介紹了vue3自定義插件的作用場景及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
如何在Vue中使用protobuf
這篇文章主要介紹了如何在Vue中使用protobuf，protobuf是由google推出的和語言無關(guān)和平臺無關(guān)，幾乎支持當(dāng)前的大部分語言，如JavaScript,下文更多相關(guān)介紹需要的小伙伴可以參考一下
2022-03-03
Vue項目打包部署到apache服務(wù)器的方法步驟
這篇文章主要介紹了Vue項目打包部署到apache服務(wù)器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
Vue中從template到j(luò)sx語法教程示例
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
Vue多重文字描邊組件實現(xiàn)示例詳解
這篇文章主要為大家介紹了Vue多重文字描邊組件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
vue 動態(tài)組件用法示例小結(jié)
這篇文章主要介紹了vue 動態(tài)組件用法,結(jié)合實例形式總結(jié)分析了vue 動態(tài)組件基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下
2020-03-03
Vite熱更新失效的問題解決
本文主要介紹了Vite熱更新失效的問題解決,原因是文件夾和文件名大小寫不一致,下面就來解決一下次問題,感興趣的可以了解一下
2024-08-08
Vite?vue3多頁面入口打包以及部署踩坑實戰(zhàn)
因為我們公司的項目是多頁面應(yīng)用,不同于傳統(tǒng)單頁面應(yīng)用,一個包就可以了,下面這篇文章主要給大家介紹了關(guān)于Vite?vue3多頁面入口打包以及部署踩坑的相關(guān)資料,需要的朋友可以參考下
2022-05-05
Vue中父子組件的值傳遞與方法傳遞
這篇文章主要介紹了Vue中父子組件的值傳遞與方法傳遞，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09