快捷導(dǎo)航

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)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

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

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

原理其實(shí)很簡(jiǎn)單，Element 已經(jīng)提供了 focus 方法，但是文檔并沒(méi)有寫明如何去調(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è)頁(yè)面只能有一個(gè)聚焦效果

last , vue也支持自定義指令

當(dāng)頁(yè)面加載時(shí)，該元素將獲得焦點(diǎn) (注意：autofocus 在移動(dòng)版 Safari 上不工作)。事實(shí)上，只要你在打開(kāi)這個(gè)頁(yè)面后還沒(méi)點(diǎn)擊過(guò)任何內(nèi)容，這個(gè)輸入框就應(yīng)當(dāng)還是處于聚焦?fàn)顟B(tài)?，F(xiàn)在讓我們用指令來(lái)實(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實(shí)現(xiàn)購(gòu)物車完整功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車完整功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
vue前端通過(guò)騰訊接口獲取用戶ip的全過(guò)程
今天在寫項(xiàng)目掉接口的時(shí)候有一個(gè)接口需要到了用戶的ip地址,查了半天覺(jué)得這個(gè)方法不錯(cuò),下面這篇文章主要給大家介紹了關(guān)于vue前端通過(guò)騰訊接口獲取用戶ip的相關(guān)資料,需要的朋友可以參考下
2022-12-12
vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
這篇文章主要介紹了vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue el-date-picker 開(kāi)始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue el-date-picker 開(kāi)始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
使用idea創(chuàng)建vue項(xiàng)目的圖文教程
Vue.js是一套構(gòu)建用戶界面的框架,只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫(kù)或既有項(xiàng)目整合,下面這篇文章主要給大家介紹了關(guān)于使用idea創(chuàng)建vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2022-08-08
Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過(guò)濾實(shí)踐及實(shí)現(xiàn)思路
這篇文章主要介紹了Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過(guò)濾實(shí)踐,，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
Vue 基礎(chǔ)語(yǔ)法之計(jì)算屬性(computed)、偵聽(tīng)器(watch)、過(guò)濾器(filters)詳解
計(jì)算屬性就是 Vue 實(shí)例選項(xiàng)中的 computed，computed 的值是一個(gè)對(duì)象類型，對(duì)象中的屬性值為函數(shù)，而且這個(gè)函數(shù)沒(méi)辦法接收參數(shù)，這篇文章主要介紹了Vue 基礎(chǔ)語(yǔ)法之計(jì)算屬性(computed)、偵聽(tīng)器(watch)、過(guò)濾器(filters)詳解,需要的朋友可以參考下
2022-11-11
詳解Vue 全局變量，局部變量
這篇文章主要介紹了Vue全局變量局部變量，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue?props使用typescript自定義類型的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue?props使用typescript自定義類型的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-01-01
Vue?(Vuex)中?store?基本用法
Vuex?是一個(gè)專為?Vue.js?應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下
2023-01-01