表单enter键代替tab键切换(依赖iview组件库)

需求:通过使用键盘enter键,实现tab键对表单元素的切换。通过给每个控件添加class="test"获取需要切换的控件,虽实现功能需求,但仍有很大的优化空间。

  1. 封装keydown.js文件
export function getKeyDown(className){
   //当前页面监视键盘输入
   document.onkeydown = function(e) {
       if(e.keyCode === 13){
           // 阻止文本框的换行
           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;
           }    
       }
   }
}
  1. 组件中引用


你可能感兴趣的:(表单enter键代替tab键切换(依赖iview组件库))