dom元素的tabindex屬性介紹及在vue項目中的應用

dom元素的tabindex屬性介紹及在vue項目中的應用

tabindex屬性作用

1. 讓普通dom元素變為可聚焦的元素
2. 讓普通dom元素可以參與順序鍵盤導航（通常使用Tab鍵，因此得名）。

tabindex屬性的取值和影響

它接受一個整數作為值，具有不同的結果，具體取決於整數的值：

• tabindex=負值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通過鍵盤導航來訪問到該元素，用JS做頁面小組件內部鍵盤導航的時候非常有用。
• tabindex="0" ，表示元素是可聚焦的，並且可以通過鍵盤導航來聚焦到該元素，它的相對順序是當前處於的DOM結構來決定的。
• tabindex=正值，表示元素是可聚焦的，並且可以通過鍵盤導航來訪問到該元素；它的相對順序按照tabindex 的數值遞增而滯后獲焦。如果多個元素擁有相同的 tabindex，它們的相對順序按照他們在當前DOM中的先后順序決定。

根據鍵盤序列導航的順序，值為 0 、非法值、或者沒有 tabindex 值的元素應該放置在 tabindex 值為正值的元素后面。

注意：如果我們在 div上設置了 tabindex 屬性，它的子元素內容不能使用箭頭鍵來滾動，除非我們在內容上也設置 tabindex。查看這篇 fiddle 來理解 tabindex 的滾動影響。

tabindex屬性的使用

<div 
     v-if="dialogVisible"
     tabindex="1"
     class="dialog"
     ref="dialog"
     @blur="loseFocus"
>
    這是一個彈窗
</div>

tabindex屬性項目中的應用

需求：有一個默認隱藏的彈窗dialog，當鼠標點擊一個button時，讓彈窗顯示；當用戶點擊彈窗dialog之外的其他區域時隱藏彈窗（要求不能使用全屏遮罩）

1. 給彈窗dialog加一個tabindex屬性，讓其變為可聚焦的元素。tabindex="1"
2. 給彈窗dialog綁定一個失去焦點的事件。@blur="loseFocus"
3. 給button綁定click事件，當click事件觸發的時候，讓彈窗展示，同時聚焦彈窗。<button @click="handleOpenDialog">打開彈窗同時獲取焦點</button>
4. 在用戶點擊button時，觸發handleOpenDialog函數，在這個函數內控制彈窗的展示，同時讓聚焦彈窗。
5. 在用戶點擊彈窗dialog之外的區域時，會觸發彈窗的失去焦點的事件函數loseFocus
6. 在loseFocus函數內控制彈窗的隱藏

詳細代碼如下：

<template>
    <div>
        <button @click="handleOpenDialog">打開彈窗同時獲取焦點</button>
        <div 
            v-if="dialogVisible"
            tabindex="1" 
            class="dialog" 
            ref="dialog" 
            @blur="loseFocus"
		>
    		這是一個彈窗
		</div>
    </div>
</template>

<script lang='ts'>
import { Vue, Component } from "vue-property-decorator";

@Component({
    name: "Father"
})
export default class Father extends Vue {
    // data
    dialogVisible: boolean = false; //是否顯示彈窗

    /**
     * 顯示彈窗，同時獲取焦點
     */
    handleOpenDialog() {
        // 顯示彈窗
        this.dialogVisible = true;

        // 讓彈窗獲取焦點
        // 第一種寫法
        // setTimeout(() => {
        //     (this.$refs.dialog as any).focus();
        // }, 0);

        // 第二種官方寫法（推薦）
        this.$nextTick(() => {
            (this.$refs.dialog as any).focus();
        });
    }

    /**
     * 彈窗失去焦點， 隱藏彈窗
     */
    loseFocus() {
        this.dialogVisible = false;
    }
    
}
</script>

<style lang="scss">
.dialog {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    
    &:focus {
        outline: 0;
    }
}
</style>

備注：如果不想讓彈窗聚焦的時候有默認的外邊框樣式，可以加一段css代碼控制樣式

.dialog:focus {
    outline: 0;
}

效果圖

• 有聚焦默認樣式
  

• 無聚焦默認樣式