vue3 enter键切换控件,shift+enter换行

vue3 enter键切换控件,shift+enter换行

之前的textare控件不能同时实现回车换行和切换控件,现在改动如下:

<el-form @keyup="handleKeyUpDown" >
...
</el-form>
<script setup>
// 处理键盘按下弹起事件,回车触发聚焦下一控件
const handleKeyUpDown = (event: KeyboardEvent) => {
	// 回车键的ASCII键码为 13,Key为Enter,Code为13但该属性已启用
	// console.log("处理键盘按下事件 event:",event)
	if (event.key == "Enter") {
        //若是shift+enter组合换行则不参与切换控件
        if(!event.shiftKey)
        {
            //阻止当前按键的默认事件
            event.preventDefault();
            let inputs: any = document.querySelectorAll("input, select,textarea");
            //寻找调用该方法的标签内,包含input,select关键字的控件并存储到集合中
            //console.log("当前回车触发的控件 inputs:",inputs)
            //遍历寻找当前回车触发的控件所在集合中的索引
            //console.log("处理键盘按下事件 event.target:",event.target)
            // (注意:textarea类型的el-input框虽然有Input关键字,但最终生成的控件是textarea,因此属于textarea类型的控件需要使用textarea关键字)
            let currentIndex = -1;
            for (let i = 0; i < inputs.length; i++) {
                if (inputs[i] === event.target) {
                    currentIndex = i;
                    break;
                }
            }
            //根据索引,默认聚焦到当前回车控件的下一个控件
            let nextindex = 0;//下一个需要聚焦的索引
            let nextok = false;//是否终止循环
            if (currentIndex >= 0 && currentIndex < inputs.length - 1) {
                for (let j = currentIndex + 1; j < inputs.length - 1; j++) {
                    //inputs内容
                    // console.log("inputs内容 inputs[j]:",inputs[j])
                    // console.log("inputs内容 inputs[j].className:",inputs[j].className)
                    // console.log("inputs内容 inputs[j].attributes:",inputs[j].attributes)
                    // console.log("inputs内容 inputs[j].attributes.keep:",inputs[j].attributes.keep)
                    // console.log("inputs内容 inputs[j].attributes.disabled:",inputs[j].attributes.disabled)

                    //寻找当前索引后的第一个非disabled控件
                    if(inputs[j].attributes.disabled ==undefined ){
                        //终止循环取索引
                        nextindex = j;
                        nextok = true;
                    }
                    //判断该索引的CLASS类名中是否包含多选框控件的名字,多选框不参与聚焦控件
                    if(inputs[j].className.includes("checkbox"))
                    {
                        nextok = false;
                    }
                    //判断该索引是否有自定义props属性keep,如果有则不参与聚焦控件
                    if(inputs[j].attributes.keep != undefined)
                    {
                        nextok = false;
                    }
                    //只有nextok为true时才选中该索引终止循环
                    if(nextok)
                    {
                        break;
                    }
                }
                //结束循环后,根据指定索引聚焦控件
                if(nextindex != 0)
                {
                    //根据索引聚焦
                    inputs[nextindex].focus();
                }
            }
            //销毁已使用的参数(console.log("销毁已使用的参数 inputs:",inputs))
            nextTick(()=>{
                inputs = undefined;
                currentIndex = -1;
                nextindex = 0;
            });
        }
	}
};
</script>