Vue中怎么實(shí)現(xiàn)回車鍵切換焦點(diǎn)

這篇文章主要介紹了Vue中怎么實(shí)現(xiàn)回車鍵切換焦點(diǎn)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們提供的服務(wù)有：網(wǎng)站制作、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、湛河ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的湛河網(wǎng)站制作公司

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

幾乎在所有瀏覽器中，都具有 Tab 鍵切換焦點(diǎn)的功能。

但是任性的用戶強(qiáng)烈要求一定要有 Enter 鍵切換焦點(diǎn)的功能。

為了交付上線拿到錢，我們只好再一次毫無原則性的接受了客戶的需求。

在上一代人中，大多都有這種操作習(xí)慣。習(xí)慣把保存成為編輯，習(xí)慣用回車替換 Tab。這是受到微軟 excel 荼毒的結(jié)果。

起初我以為這個(gè)功能很簡單，無非就是把 Enter 鍵的功能轉(zhuǎn)接到 Tab 鍵上面，分分鐘就可以解決掉的問題。

可困難馬上就出現(xiàn)了，我發(fā)現(xiàn)這條路是走不通的。

我們經(jīng)?？梢灾鲃佑|發(fā)某個(gè)事件，比如 el.click() 就可以調(diào)用點(diǎn)擊事件，或者使用 dispatchEvent 。但是鍵盤和鼠標(biāo)事件卻不行。

我查閱了很多資料，也做了很多嘗試。最后總結(jié)出來一個(gè)結(jié)論，在瀏覽器中，JavaScript 無法操作用戶的鍵盤或者鼠標(biāo)，這是出于安全策略的考慮。仔細(xì)想一下，如果可以用一段 JavaScript 腳本控制用戶鍵盤和鼠標(biāo)的話，那么用戶只需要打開一個(gè)黑客網(wǎng)站，黑客就可以瞬間得到他想得到的一切。

所以，如果要通過除 Tab 鍵以外的其他方式來觸發(fā)焦點(diǎn)切換， focus 幾乎是唯一的選擇。

在原生頁面中實(shí)現(xiàn)回車鍵切換焦點(diǎn)

項(xiàng)目是基于 vue 和 element-ui 做的，為了把實(shí)現(xiàn)思路先講清楚，暫時(shí)把這些拋開，從原生的頁面中尋找答案。

以下是一個(gè)原生的 html 頁面。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" />
 <title>Demo</title>
 </head>
 <body>
 <form>
 <input placeholder="姓名" />
 <input placeholder="性別" />
 <input placeholder="年齡" />
 </form>
 </body>
</html>

接下來要實(shí)現(xiàn)通過回車鍵切換焦點(diǎn)，我把思路梳理如下：

監(jiān)聽回車鍵按下事件。
獲取當(dāng)前聚焦元素。
獲取下一個(gè)要被聚焦的元素。
切換焦點(diǎn)。

思路有了，實(shí)現(xiàn)起來也非常簡單。

1.監(jiān)聽回車鍵按下事件

在文檔中添加 script 標(biāo)簽，寫入如下代碼。

function enterCallback(e) {
 if (e.keyCode === 13) {
 // 按下回車后的邏輯
 }
}
window.addEventListener("keydown", enterCallback);

要注意， enterCallback 單獨(dú)拿出來，用于注銷監(jiān)聽事件。

監(jiān)聽按鍵事件最常用的方法就是使用事件委托，將事件綁定到 window 對象上。相比較給每一個(gè)元素都綁定一個(gè)事件的方式，這樣做的最大好處就是節(jié)省內(nèi)存空間，性能更好。

判斷按下哪個(gè)鍵的方式有很多，比如判斷 e.key 、 e.code 或者 e.keyCode 等方式。但絕大多數(shù)的情況下都建議使用 e.keyCode 。下面是一張來自網(wǎng)絡(luò)的 keyCode 表。

Vue中怎么實(shí)現(xiàn)回車鍵切換焦點(diǎn)

2.獲取當(dāng)前聚焦元素

很容易就可以做到這一步。

常見的有兩種方式。第一種是 e.target ，第二種是 document.activeElement 。這種情況下，個(gè)人更推薦使用第二種。

function enterCallback(e) {
 if (e.keyCode === 13) {
 let activeEl = document.activeElement;
 }
}

3.獲取下一個(gè)要被聚焦的元素

這一步也比較容易。使用 el.nextElementSibling API 即可獲取。

function enterCallback(e) {
 if (e.keyCode === 13) {
 let activeEl = document.activeElement;
 let nextEl = activeEl.nextElementSibling;
 }
}

4.切換焦點(diǎn)

切換焦點(diǎn)調(diào)用 focus 即可實(shí)現(xiàn)。

function enterCallback(e) {
 if (e.keyCode === 13) {
 let activeEl = document.activeElement;
 let nextEl = activeEl.nextElementSibling;
 nextEl && nextEl.focus();
 }
}

至此一個(gè)最簡單的 Demo 已經(jīng)實(shí)現(xiàn)了，接下來看看項(xiàng)目中實(shí)際的情況。

在 element-ui 項(xiàng)目中實(shí)現(xiàn)回車鍵切換焦點(diǎn)

因?yàn)槭鞘褂媒M件開發(fā)，加上樣式等因素，dom 節(jié)點(diǎn)并不像上面寫的原生 Demo 那么簡單，實(shí)際情況是多層嵌套的。下面是實(shí)際生成的代碼結(jié)構(gòu)。

<div
 class="el-form-item el-form-item--small"
 
>
 <label for="pactcode" class="el-form-item__label" 
 >協(xié)議號</label
 >
 <div class="el-form-item__content" >
 <div class="el-input el-input--small">
 <!---->
 <input
 type="text"
 autocomplete="off"
 id="el-input"
 placeholder="未填寫協(xié)議號"
 class="el-input__inner"
 />
 <!---->
 </div>
 </div>
</div>

可以看到，如果每一個(gè)輸入框都是這種類型的嵌套結(jié)構(gòu)，上面的方法是無法直接解決的。因?yàn)?nextElementSibling API 只能找到下一個(gè)兄弟元素，而在這里 input 明顯找不到下一個(gè)兄弟元素。

思路是，通過回溯的手段朝外層尋找，直到找到一個(gè)類名包含 el-form-item 和 el-form-item--small 的祖級元素，然后再從這個(gè)祖級元素的下一個(gè)兄弟元素中尋找類名包含 el-input__inner 的 input 元素。

所以要再寫兩個(gè)函數(shù)，分別是尋找組件元素的 findFormItem 和尋找 input 元素的 findInput 。

findFormItem：

function findFormItem(el) {
 const parent = el.parentElement;
 if (!parent) return document.body;
 if (
 parent.className.includes("el-form-item") &&
 parent.className.includes("el-form-item--small")
 ) {
 return parent;
 }
 return findFormItem(parent);
}

findInput：

function findInput(container) {
 let nextEl = container.nextElementSibling;
 if (!nextEl) return;
 let input = nextEl.querySelector("input");
 while (input.id === "el-select") {
 nextEl = nextEl.nextElementSibling;
 if (!nextEl) return;
 input = nextEl.querySelector("input");
 }
 if (input.className.includes("el-input__inner")) return input;
}

有了這兩個(gè)函數(shù)以后，實(shí)現(xiàn)回車切換焦點(diǎn)就非常簡單了。只需要執(zhí)行兩行代碼。

const container = findFormItem(document.activeElement);
findInput(container) && findInput(container).focus();

完整的代碼大概是這樣的。

在 methods 中聲明三個(gè)方法。

methods: {
 addEnterListener() {
 if (window.__completeEnterBind__) return;
 window.addEventListener("keydown", this.enterCallback);
 window.__completeEnterBind__ = true;
 },
 removeEnterListener() {
 window.removeEventListener("keydown", this.enterCallback);
 window.__completeEnterBind__ = false;
 },
 enterCallback(e) {
 function findFormItem(el) {
 const parent = el.parentElement;
 if (!parent) return document.body;
 if (
  parent.className.includes("el-form-item") &&
  parent.className.includes("el-form-item--small")
 ) {
  return parent;
 }
 return findFormItem(parent);
 }
 function findInput(container) {
 let nextEl = container.nextElementSibling;
 if (!nextEl) return;
 let input = nextEl.querySelector("input");
 while (input.id === "el-select") {
  nextEl = nextEl.nextElementSibling;
  if (!nextEl) return;
  input = nextEl.querySelector("input");
 }
 if (input.className.includes("el-input__inner")) return input;
 }
 if (e.keyCode === 13) {
 const container = findFormItem(document.activeElement);
 findInput(container) && findInput(container).focus();
 }
 }
}

然后在 mounted 中添加回車監(jiān)聽和在 destroy 中移除回車鍵聽。

mounted() {
 this.addEnterListener();
},
destroy() {
 this.removeEnterListener();
},

需要注意的是，項(xiàng)目是多標(biāo)簽頁的形式，表單組件可能會被渲染多次，所以通過在 window 對象上添加一個(gè) __completeEnterBind__ 字段來確?；剀嚀Q行事件正確綁定。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue中怎么實(shí)現(xiàn)回車鍵切換焦點(diǎn)”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

分享題目：Vue中怎么實(shí)現(xiàn)回車鍵切換焦點(diǎn)
文章出自：http://muchs.cn/article14/jejcde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站、服務(wù)器托管、網(wǎng)站策劃、網(wǎng)站營銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容