element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)

更新時(shí)間：2021年10月01日 09:16:12 作者：蘿卜砸大坑

本文主要介紹了element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近項(xiàng)目中在做表單的時(shí)候，需要自動(dòng)滾動(dòng)到評(píng)論框，并且讓評(píng)論框自動(dòng)聚焦，這就需要手動(dòng)觸發(fā)輸入框的 focus 狀態(tài)。

但是，element并不支持autofocus屬性，那就只能通過原生的js效果獲取聚焦效果了

document.getElementById("input").focus();

或者利用vue的ref屬性也可以實(shí)現(xiàn)聚焦效果：

原理其實(shí)很簡(jiǎn)單，Element 已經(jīng)提供了 focus 方法，但是文檔并沒有寫明如何去調(diào)用,下面是在el-input標(biāo)簽上加入ref屬性，然后在需要的地方直接調(diào)用方法就可以了

<el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容" ref="input"></el-input>

this.$nextTick(() => {
      this.$refs.input.focus()
    })

注意：一個(gè)頁面只能有一個(gè)聚焦效果

last , vue也支持自定義指令

當(dāng)頁面加載時(shí)，該元素將獲得焦點(diǎn) (注意：autofocus 在移動(dòng)版 Safari 上不工作)。事實(shí)上，只要你在打開這個(gè)頁面后還沒點(diǎn)擊過任何內(nèi)容，這個(gè)輸入框就應(yīng)當(dāng)還是處于聚焦?fàn)顟B(tài)?，F(xiàn)在讓我們用指令來實(shí)現(xiàn)這個(gè)功能：

// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
    // element-ui
    el.children[0].focus()
    // 元素有變化，如show或者父元素變化可以加延時(shí)或判斷
    setTimeout(_ => {
      el.children[0].focus()
    })
  }
})

參考：vue自定義指令 https://cn.vuejs.org/v2/guide/custom-directive.html

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

您可能感興趣的文章:

相關(guān)文章

vue中如何使用vue-touch插件
這篇文章主要介紹了vue中使用vue-touch插件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
vue3.2?reactive函數(shù)問題小結(jié)
reactive用來包裝一個(gè)對(duì)象，使其每個(gè)對(duì)象屬性都具有響應(yīng)性（也就是深層次響應(yīng)式），這篇文章主要介紹了vue3.2?reactive函數(shù)注意點(diǎn)及問題小結(jié),需要的朋友可以參考下
2022-12-12
VUE 記賬憑證模塊組件的示例代碼
這篇文章主要介紹了VUE記賬憑證模塊組件的實(shí)例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-03-03
vue3中使用sse最佳實(shí)踐,封裝工具詳解
這篇文章主要介紹了vue3中使用sse最佳實(shí)踐,封裝工具,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue 指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限管理功能
這篇文章主要介紹了Vue 指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限管理功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
Vuex實(shí)現(xiàn)簡(jiǎn)單購物車
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)簡(jiǎn)單購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
vuecli4插件svg-sprite-loader使用svg圖標(biāo)
這篇文章主要為大家介紹了vuecli4插件svg-sprite-loader使用svg圖標(biāo)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue過濾器用法實(shí)例分析
這篇文章主要介紹了vue過濾器用法,結(jié)合實(shí)例形式總結(jié)分析了vue.js常見過濾器相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
2019-03-03
vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)
這篇文章主要介紹了vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-11-11
Vue3+Element Plus進(jìn)行圖片加載優(yōu)化全攻略
在Web開發(fā)中,未優(yōu)化的圖片會(huì)導(dǎo)致很多問題,本文將為大家介紹一下Vue3如何通過Element Plus進(jìn)行圖片加載優(yōu)化,希望對(duì)大家有所幫助
2025-03-03