peisweb/src/utlis/getKeyDown.js

// 通过绑定输入框的 class 来实现enter 代替 tab 的功能
/*
    示例： 
    import { getKeyUp } from '../../utlis/getKeyUp'

    created() {
        getKeyUp('enterToTab')
    }

*/
export function getKeyDown(className){
    //当前页面监视键盘输入  onkeyup /onkeydown
    document.onkeydown = function(e) {
        //e.keyCode === 13
        if(e.key == 'Enter'){
            // 阻止文本框的换行
            if(window.event){
                window.event.returnValue = false;
            }else{
                e.preventDefault(); //for firefox
            }
            // 标记当前组件为true
            if(e.target.tagName === 'INPUT'){
                e.target.autofocus = true;
            }else if(e.target.tagName === 'TEXTAREA'){
                e.target.autofocus = true;
            }else{
                e.target.firstChild.autofocus = true;
            }
            // 获取所有需要定位的组件
            let arr = document.querySelectorAll("."+className);
            let index2 = -1;
            arr.forEach((i,index) => {
                if(i.querySelectorAll("input")[0]){
                    if(i.querySelectorAll("input")[0].autofocus){
                        index2 = index;
                    }
                }else if(i.querySelectorAll("textarea")[0]){
                    if(i.querySelectorAll("textarea")[0].autofocus){
                        index2 = index;
                    }
                }else{
                    // 暂无其他
                }
            })
            // 超出返回第一个组件
            if(index2 + 1 >= arr.length){
                index2 = -1;
            }
            // 聚焦到下一个组件中
            if(arr[index2 + 1].querySelectorAll("input")[0]){
                if(arr[index2 + 1].querySelectorAll("input")[0].type === 'hidden'){
                    arr[index2 + 1].querySelectorAll("input")[0].parentElement.focus();
                }else{
                    arr[index2 + 1].querySelectorAll("input")[0].focus();
                }
            }else if(arr[index2 + 1].querySelectorAll("textarea")[0]){
                arr[index2 + 1].querySelectorAll("textarea")[0].focus();
            }else{
                // 暂无其他
            }
            // 重置当前组件为false
            if(e.target.tagName === 'INPUT'){
                e.target.autofocus = false;
            }else if(e.target.tagName === 'TEXTAREA'){
                e.target.autofocus = false;
            }else{
                e.target.firstChild.autofocus = false;
            }    
        }
    }
 }