在網(wǎng)頁的表單中，經(jīng)常需要用程序來控制input和textarea的自動(dòng)聚焦行為。例如我最近做的一個(gè)項(xiàng)目，有個(gè)裝箱出庫的流程，input框自動(dòng)聚焦的流程如下：頁面進(jìn)入時(shí)自動(dòng)聚焦到訂單號(hào)輸入框->訂單號(hào)掃描完畢聚焦到商品條碼輸入框->掃描完一個(gè)商品條碼后依然停留在條碼輸入框->所有條碼掃描完畢聚焦到訂單號(hào)輸入框。
十余年的奇臺(tái)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整奇臺(tái)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“奇臺(tái)網(wǎng)站設(shè)計(jì)”,“奇臺(tái)網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
為了應(yīng)付這種需求，就做了這個(gè)指令，github地址： vue-auto-focus，歡迎star。
example
行為控制
next 聚焦到下一個(gè)元素
prev 聚焦到上一個(gè)元素
first 聚焦到第一個(gè)元素
last 聚焦到最后一個(gè)元素
jump 聚焦到指定的元素
聚焦行為控制邏輯
重慶分公司
重慶分公司
/**
* 聚焦行為控制
* next 聚焦到下一個(gè)元素
* prev 聚焦到上一個(gè)元素
* first 聚焦到第一個(gè)元素
* last 聚焦到最后一個(gè)元素
* jump 跳轉(zhuǎn)到指定的元素
* @param el
*/
const focusCtrl = function (el) {
const action = el.dataset.action
const allFocusEls = getAllFocusEls(el)
const focusLen = allFocusEls.length
let current = getTargetIndex(el,allFocusEls)
switch (action) {
case 'next': // 如果action為next,則聚焦到下一個(gè)輸入框
if (current >= focusLen - 1) {
current = focusLen - 1
} else {
current++
}
autoFocus(allFocusEls[current])
break
case 'prev': // 如果action為prev,則聚焦到上一個(gè)輸入框
if (current <= 0) {
current = 0
} else {
current--
}
autoFocus(allFocusEls[current])
break
case 'first': // 如果為first,則聚焦到第一個(gè)輸入框
current = 0
autoFocus(allFocusEls[current])
break;
case 'last': // 如果為last,則聚焦到最后一個(gè)輸入框
current = focusLen - 1
autoFocus(allFocusEls[current])
break
case 'jump': // 如果為jump,則獲取focusIndex,跳轉(zhuǎn)到對(duì)應(yīng)的輸入框
if (current >= 0 && current < focusLen) {
autoFocus(allFocusEls[current])
}
break
}
}
必須在需要控制的元素上添加data-index屬性，需要在父元素上添加data-action屬性和data-current屬性，data-action為指令行為的類型（值為next,prev等），data-current為當(dāng)前聚焦元素的data-index值， getAllFocusEls 方法其實(shí)就是獲取所有屬性為data-index的元素，代碼如下：
/**
* 獲取需要聚焦的所有元素
* @param el {Node} 指令掛載的元素
* @returns {NodeList} 需要聚焦的元素列表
*/
const getAllFocusEls = function (el) {
return el.querySelectorAll('[data-index]')
}getTargetIndex 方法用來獲取當(dāng)前聚焦元素的在集合中的索引值，代碼如下：
/**
* 獲取當(dāng)前聚焦元素在集合中的位置
* @param el
* @param collection
* @returns {number}
*/
const getTargetIndex = function(el,collection) {
const target = document.querySelector(`[data-index="${el.dataset.current}"]`)
return Array.from(collection).indexOf(target)
}inserted
指令掛載時(shí)，自動(dòng)聚焦到指定的元素
/**
* 進(jìn)入頁面時(shí),根據(jù)設(shè)置的data-index索引值,聚焦到對(duì)應(yīng)的輸入框
* @param el
*/
inserted: function (el) {
const allFocusEls = getAllFocusEls(el) // 獲取需要聚焦的input元素組
let current = getTargetIndex(el,allFocusEls)
if (!current || current < 0 || current >= allFocusEls.length) { // 如果沒有設(shè)置data-current,或者current的數(shù)值范圍不符合要求,則默認(rèn)聚焦到第一個(gè)輸入框
current = 0
}
const currentEl = allFocusEls[current]
autoFocus(currentEl)
},update
通過指令的value值控制指令的執(zhí)行，如果值有變動(dòng)，則執(zhí)行指定的操作，聚焦到指定的元素
/**
* 更新時(shí),如果focusCtrl有變動(dòng),則根據(jù)actionType來判斷聚焦的行為,聚焦到對(duì)應(yīng)的元素
* @param el
* @param value
* @param oldValue
*/
update: function (el,{value,oldValue}) {
if (value !== oldValue) {
focusCtrl(el)
}
},
以上這篇vue-auto-focus: 控制自動(dòng)聚焦行為的 vue 指令方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。
