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

這篇文章主要介紹了element中如何實(shí)現(xiàn)input輸入框自動(dòng)獲取焦點(diǎn)，具有一定借鑒價(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()
    })
  }
})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“element中如何實(shí)現(xiàn)input輸入框自動(dòng)獲取焦點(diǎn)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!