element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)
最近項(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)有寫(xiě)明如何去調(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)文章希望大家以后多多支持腳本之家！
- vue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼
- vue+element-ui中form輸入框無(wú)法輸入問(wèn)題的解決方法
- 詳解Vue3.0中ElementPlus<input輸入框自動(dòng)獲取焦點(diǎn)>
- Vue ElementUI實(shí)現(xiàn):限制輸入框只能輸入正整數(shù)的問(wèn)題
- Element Input輸入框的使用方法
- vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位
- Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)詳解
- element表單驗(yàn)證如何清除校驗(yàn)提示語(yǔ)
- Vue Element校驗(yàn)validate的實(shí)例
- element必填校驗(yàn)輸入空格問(wèn)題修改正則表達(dá)式、請(qǐng)求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格(推薦)
相關(guān)文章
這篇文章主要介紹了vue中使用vue-touch插件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
vue3.2?reactive函數(shù)問(wèn)題小結(jié)
reactive用來(lái)包裝一個(gè)對(duì)象，使其每個(gè)對(duì)象屬性都具有響應(yīng)性（也就是深層次響應(yīng)式），這篇文章主要介紹了vue3.2?reactive函數(shù)注意點(diǎn)及問(wèn)題小結(jié),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了VUE記賬憑證模塊組件的實(shí)例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了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)單購(gòu)物車(chē)
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)，文中示例代碼介紹的非常詳細(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過(guò)濾器用法,結(jié)合實(shí)例形式總結(jié)分析了vue.js常見(jiàn)過(guò)濾器相關(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開(kāi)發(fā)中,未優(yōu)化的圖片會(huì)導(dǎo)致很多問(wèn)題,本文將為大家介紹一下Vue3如何通過(guò)Element Plus進(jìn)行圖片加載優(yōu)化,希望對(duì)大家有所幫助2025-03-03