layui table 使用tab键切换单元格

最新推荐文章于 2023-12-26 10:16:53 发布

一下而已

最新推荐文章于 2023-12-26 10:16:53 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： layui javascript 前端

本文链接：https://blog.youkuaiyun.com/jikey2023/article/details/130341120

本文介绍如何在layui表格中利用JavaScript实现Tab键切换单元格焦点，提升前端表单编辑的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="${ctx}/static/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    /*
        *编辑数据表格，键盘快捷键方法。
        *可跳过无编辑属性的列
        *tab 右边一个单元格
        *shift + tab 左边一个单元格
        *enter 下一行的单元格
        *shift + enter 上一行的单元格
        */
    //支持tab+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 ? 'prevAll' : 'nextAll']('[data-edit="text"]:first').click();
                    break;
                case