快捷導(dǎo)航

Vue?Input輸入框自動(dòng)獲得焦點(diǎn)的有效方法

更新時(shí)間：2022年11月16日 11:26:35 作者：落葉塵楓

我們有時(shí)候會(huì)遇到要輸入框自動(dòng)獲取焦點(diǎn)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue?Input輸入框自動(dòng)獲得焦點(diǎn)的簡(jiǎn)單方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

效果：在點(diǎn)擊Tab "Material Incoming"的時(shí)候，鼠標(biāo)光標(biāo)focus在PKG ID的input輸入框關(guān)鍵代碼是使用 this.$nextTick(()

????????this.$nextTick(() => {
? ? ? ? ????????this.$refs.pkgId.focus();
? ? ? ??})

注意：僅僅使用 this.$refs.pkgId.focus(); 是不起作用的，需要點(diǎn)擊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)上資料說(shuō)是因?yàn)?lt;el-input> 外面還有其他組件（我試了一個(gè)Form只有一個(gè)<el-input> 也沒(méi)生產(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>

補(bǔ)充：vue input 獲取焦點(diǎn)并選中

onRename(row) {
      this.$nextTick(() => {
        document.querySelector(`#a${row.id}`).focus()
        document.querySelector(`#a${row.id}`).select()
      })
    },

通過(guò)id獲取焦點(diǎn)并選中

總結(jié)

到此這篇關(guān)于Vue Input輸入框自動(dòng)獲得焦點(diǎn)的文章就介紹到這了,更多相關(guān)Vue Input輸入框自動(dòng)獲得焦點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

通過(guò)npm引用的vue組件使用詳解
本文章通過(guò)實(shí)現(xiàn)一個(gè)vue-dialog的彈出層組件，然后附加說(shuō)明如果發(fā)布此包到npm，且能被其他項(xiàng)目使用。本文給大家介紹的非常詳細(xì)，需要的的朋友參考下
2017-03-03
vue中使用scrollTo沒(méi)有效果的完美解決方法
這篇文章主要介紹了在vue中使用scrollTo沒(méi)有效果的解決方法,本文給大家分享具體操作步驟,在這里需要注意scrollTo要作用在可滾動(dòng)的元素上,不然不生效,scrollTop就會(huì)一直為0,需要的朋友可以參考下
2023-10-10
Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue進(jìn)入頁(yè)面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過(guò)程
這篇文章主要介紹了vue進(jìn)入頁(yè)面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
webpack項(xiàng)目中使用vite加速的兼容模式詳解
這篇文章主要為大家介紹了webpack項(xiàng)目中使用vite加速的兼容模式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue中的v-for指令不起效果的解決方法
今天小編就為大家分享一篇Vue中的v-for指令不起效果的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue中使用webuploader做斷點(diǎn)續(xù)傳實(shí)現(xiàn)文件上傳功能
之前做的一個(gè)項(xiàng)目中，由于經(jīng)常上傳幾百兆的壓縮包，導(dǎo)致經(jīng)常上傳失敗，所以就找了webuploader插件做了斷點(diǎn)續(xù)傳,斷點(diǎn)續(xù)傳除了需要前端分片，也需要后臺(tái)去支持，所以做的時(shí)候做好對(duì)接協(xié)調(diào),所以本文就給大家詳細(xì)的介紹一下vue中如何使用webuploader做斷點(diǎn)續(xù)傳
2023-07-07
Vue3指令之搜索框輸入防抖功能實(shí)現(xiàn)
在Vue開(kāi)發(fā)中遇到了搜索框輸入防抖處理,算是防抖的使用場(chǎng)景之一吧,這篇文章主要給大家介紹了關(guān)于Vue3指令之搜索框輸入防抖功能實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2022-12-12
element的el-table自定義最后一行的實(shí)現(xiàn)代碼
最后一行要顯示一些其他結(jié)果,用的是element? ui 自帶的數(shù)據(jù)總計(jì)的屬性；返回一個(gè)數(shù)組,會(huì)按下標(biāo)進(jìn)行展示,這篇文章主要介紹了element的el-table自定義最后一行的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2024-03-03
vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開(kāi)網(wǎng)頁(yè)
最近在搭建自己的博客,前端采用Vue技術(shù),發(fā)現(xiàn)首頁(yè)加載速度非常之慢,常常達(dá)到10S左右,遂開(kāi)始優(yōu)化之旅,這篇文章主要給大家介紹了關(guān)于vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開(kāi)網(wǎng)頁(yè)的相關(guān)資料,需要的朋友可以參考下
2022-08-08