react+js实现回车切换页面input和select框

需求:页面上有input和select等输入框和下拉框,回车相互切换

实现:

html:

      <div className="input-container">
        <div>
          <Input />
          <Input />
        </div>
        <div>
          <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
          </select>
        </div>
       </div>

javascript核心功能:

   function changeEnter(inputs) {
    const init = () => {
        for(let i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener('keydown', focus(i), false); // 每个input添加键盘监听
        }
    }

    const focus = (i) => {
        return (event) => {
            const next = i + 1 < inputs.length ? i + 1 : 0; // 判断是否为最后一个输入框,是则返回第一个,否则继续下一个
            const eve = event ? event : window.event;
            if (eve.keyCode === 13) {
                if (inputs[next].tagName === 'INPUT' || inputs[next].tagName === 'SELECT') {
                    inputs[next].focus();
                }
            }
        }
    }

    const destory = () => {
        for(let i = 0; i < inputs.length; i++) {
            inputs[i].removeEventListener('keydown', focus(i), false); // 解除监听
        }
    }

    init();

    return {
        destory() {
            destory();
        }
    }
   }

代码调用:

  componentDidMount() {
    // 获取页面上input和select的dom元素
    const changes = document.querySelectorAll('.input-container input, select');
    this.inputEnter = changeEnter(changes);
  }
  componentWillUnmount() {
    // 卸载解除监听事件
    this.inputEnter.destory();
  }

实现效果:

备注:如果是Ant的Select组件,要换种写法,可以用官方文档上写的onInputKeyDown(按下回车时的回调)实现,写法稍有不同,但实现逻辑差不多。

posted @ 2020-04-17 16:12  木易锅巴  阅读(189)  评论(0编辑  收藏