快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

注意：一個頁面只能有一個聚焦效果

last , vue也支持自定義指令

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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