Vue?Input輸入框自動獲得焦點的有效方法
更新時間：2022年11月16日 11:26:35 作者：落葉塵楓
我們有時候會遇到要輸入框自動獲取焦點的情況,下面這篇文章主要給大家介紹了關(guān)于Vue?Input輸入框自動獲得焦點的簡單方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
效果：在點擊Tab "Material Incoming"的時候，鼠標光標focus在PKG ID的input輸入框關(guān)鍵代碼是使用 this.$nextTick(()
????????this.$nextTick(() => {
? ? ? ? ????????this.$refs.pkgId.focus();
? ? ? ??})注意：僅僅使用 this.$refs.pkgId.focus(); 是不起作用的，需要點擊Tab Material Incoming 兩次才有效，但這并不是初衷。即：
方法A：生效
? ? tabInitialClick(tab, event) {
? ? ? this.$nextTick(() => {
? ? ? ? this.$refs.pkgId.focus();
? ? ? })
? ? },方法B：不生效
? ? tabInitialClick(tab, event) {
? ? ? this.$refs.pkgId.focus();
? ? },另外，以下方法如下，使用autofocus=“true" 也不生效，原因網(wǎng)上資料說是因為<el-input> 外面還有其他組件 （我試了一個Form只有一個<el-input> 也沒生產(chǎn)。不知道為什么。。。）
<el-col :span="8"> ? ? <el-form-item label="PKG ID (S)" prop="pkgId" required> ? ? ? ? ? <el-input v-model=" IncomingMaterialForm.pkgId" ref="pkgId" autofocus="true" placeholder="Please input pkg id" clearable style="width: 300px;" /> ? ? </el-form-item> </el-col>
補充：vue input 獲取焦點并選中
onRename(row) {
this.$nextTick(() => {
document.querySelector(`#a${row.id}`).focus()
document.querySelector(`#a${row.id}`).select()
})
},通過id獲取焦點并選中
總結(jié)
到此這篇關(guān)于Vue Input輸入框自動獲得焦點的文章就介紹到這了,更多相關(guān)Vue Input輸入框自動獲得焦點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue組件通信的方式，這是在面試中一個非常高頻的問題。其實Vue組件的通信方式除了props和?$emit還有很多，本文將對vue組件通信方式進行一下總結(jié)，感興趣的可以學習一下2021-12-12
這篇文章主要介紹了Iview Table組件中各種組件擴展的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細介紹了vue3實現(xiàn)表格編輯和刪除功能的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
VUE分為兩種路由模式分別是hash（哈希）和history，他們的區(qū)別是hash模式不會包含在http請求中，并且不會重新加載頁面，而使用history模式的話，如果前端的url和后端發(fā)起請求的url不一致的話，會報404錯誤，所以使用history模式的話我們需要和后端進行配合2022-09-09
vue中的render函數(shù),它返回的是一個虛擬節(jié)點vnode,也就是我們要渲染的節(jié)點,下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
最近在學習vue，本文主要介紹了使用idea創(chuàng)建第一個Vue項目，文中根據(jù)圖文介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue3之 頁面,菜單,路由的使用，文章圍繞Vue3頁面,菜單,路由相關(guān)資料展開詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了vue如何動態(tài)修改$router參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue封裝全局過濾器Filters的步驟，通過封裝vue全局過濾器實現(xiàn)filters的統(tǒng)一管理。感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了vue鍵盤事件keyup、keydown的作用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12