单元格编辑完成后按下回车跳入下一个td继续编辑

提问 已结
13 207
快到碗里来486
悬赏:20飞吻
版本:layui v2.4.5 浏览器:chrome
修改完单元格内的内容后,按下回车确认,失去焦点,可是没有办法跳入到下一个td内,但是不做修改直接回车可以跳入下一个单元格,没有达到效果。
回帖
  • IDyun
    2019-3-10


    var $ = layui.$;
    /*
    *tab 右边一个单元格
    *shift + tab 左边一个单元格
    *enter 下一行的单元格
    *shift + enter 上一行的单元格
    */
    $(document).on('keydown keyup', '.layui-input',
    function(event) {
    var td = $(this).parent('td'),
    index = td.index(),
    tr = td.parent('tr'),
    isShift = $(document).data('shift'),
    isKeydown = (event.type == "keydown");
    switch (event.key) {
    case "Shift":
    $(document).data('shift', isKeydown);
    break;
    case "Tab":
    event.preventDefault();
    isKeydown && td[isShift ? 'prev': 'next']().click();
    break;
    case "Enter":
    isKeydown && tr[isShift ? 'prev': 'next']().children('td').eq(index).click();
    break;
    }
    })
    0 回复
  • 想实现的效果就是编辑完事后,回车确认跳入下一个td继续编辑。可是回车后失去焦点,就没有然后了。求大神给个思路。什么监听都试过了,也监听了div内元素的变化来执行事件和input失去焦点,可是一旦修改后回车就没反应了。
    0 回复
  • stock2
    2019-3-9
    我以前实现过的,先定位到你要的td下input或edit在click
    0 回复
  • @stock2 我用activeElement定位了,也拿到元素了,可是一旦修改后,按下回车后光标消失就没反应了。
    0 回复
  • @stock2 也就是修改后按下回车后它不执行next().click()
    0 回复
  • @stock2
    这里我监听了DIV元素内容的改变,改变后也不执行
    0 回复
  • stock2
    2019-3-9
    你用f12,开启调试,看看是否是你的预期。这个肯定是可以实现的
    0 回复
  • @stock2 理论是可以实现的,我把那个click换成text,也可以拿到下一个td里div的内容,可是一换成click就没有效果了。还有就是我的div的class属性名每次修改值后按回车确认会发生变化,是动态的,跟这个有关系么?
    0 回复
  • 0 回复
  • stock2
    2019-3-9
    我记得tdelem=定位到td(位置),然后再tdelem.click(),你是要回车后,继续下一行的同列,自动点击编辑对吧?
    0 回复