如何在下一个 Table 单元格中使用 Tab 键设置焦点输入

Question

以下是我在 HTML

中使用 JQuery 实现的场景

当用户双击 table 单元格时，它应该在里面有一个新的输入双击单元格 [完成]
当用户按下 [Tab] 键时，它应该移动到下一个单元格 [Done]

在情况 2 的情况下，我需要在下一个单元格上触发 dblclick() 事件，在其中创建输入元素，但它无法在输入元素内聚焦。

我已经尝试调试无法理解为什么会发生这种情况。

我创建了一个按钮并编写了触发 dblclick() 的点击函数，然后将焦点设置在输入元素内。

我无法理解当用户使用鼠标单击时/click() 那么为什么焦点设置在创建的输入元素上但是为什么当我从代码中使用触发双击时没有发生同样的事情dblclick()

以下是相同的代码：

//Global Variables
var TabEdit_sourceInput = null;
var TabEdit_currentTd = null;
var TabEdit_DOMtocheck = null;
var TabEdit_previousHour = null;
var gridRefreshFlag = false;

//Init Double Click Event on the Table TD
$('.custom-table-td').dblclick(function(event){
    var tableId = $(this).attr('id');
    var inputId = 'input-'+tableId;
    $(this).html('<input id="input-'+tableId+'" placeholder="Type Message" class="form-control" onkeydown="return initCheckKeypress();" tabindex="1"/>');
    
    //Focusing on Generated Event
    $('#'+inputId).focus();

    //Binding the Focus Out Event to
    $('#'+inputId).focusout(function(){
        debugger;
        $('.header').html($(this).val());
     });
     
});

//Click Event to trigger dblclick on td with id = 'tableData1'
$('.btn-trigger-dbclick').click(function(){
    $('#tableData1').dblclick();
});

//Function to check Tab is Press or not
function initCheckKeypress(evt) {
    "use strict";
    var e = event || evt; // for trans-browser compatibility
    var charCode = e.which || e.keyCode;
    if (charCode === 9) {
        gridRefreshFlag = true;
        TabEdit_sourceInput = $(e.target);
        TabEdit_currentTd = TabEdit_sourceInput.parent();
        TabEdit_DOMtocheck = TabEdit_currentTd.next('td');
        movetoNextTD();
    }
}


//Code to Click on Next Cell
function movetoNextTD() {
    if (gridRefreshFlag && TabEdit_DOMtocheck !== null) {
        TabEdit_currentTd.html("");
        TabEdit_DOMtocheck.dblclick();
        resetmovetoNextVariable();
    }
}

//Reset Global Variable
function resetmovetoNextVariable(){
    TabEdit_sourceInput = null;
    TabEdit_currentTd = null;
    TabEdit_DOMtocheck = null;
    TabEdit_previousHour = null;
    gridRefreshFlag = false;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Focus Issue</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="header"></div>
                <table class="table table-bordered">
                    <tbody>
                        <tr id="tableRow1">
                            <th id="tableHeader1" class="custom-table-th">TH 1</th>
                            <th id="tableHeader2" class="custom-table-th">TH 2</th>
                            <th id="tableHeader3" class="custom-table-th">TH 3</th>
                        </tr>
                        <tr id="tableRow2">
                            <td id="tableData1" class="custom-table-td"></td>
                            <td id="tableData2" class="custom-table-td"></td>
                            <td id="tableData3" class="custom-table-td"></td>
                        </tr>
                    </tbody>
                </table>
                <button class="btn btn-primary btn-trigger-dbclick">Trigger</button>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

这是怎么回事：

双击 - 生成第一个输入并设置焦点，很好
用户按下 tab - 检查 tab 的代码在系统事件处理程序之前启动并创建第二个输入并设置焦点 - 然后系统继续默认的 tab 操作并关闭第二个输入

修复是在创建第二个输入后取消系统默认事件：

e.preventDefault();

更新的代码段：

//Global Variables
var TabEdit_sourceInput = null;
var TabEdit_currentTd = null;
var TabEdit_DOMtocheck = null;
var TabEdit_previousHour = null;
var gridRefreshFlag = false;

//Init Double Click Event on the Table TD
$('.custom-table-td').dblclick(function(event){
    var tableId = $(this).attr('id');
    var inputId = 'input-'+tableId;
    $(this).html('<input id="input-'+tableId+'" placeholder="Type Message" class="form-control" onkeydown="return initCheckKeypress();" tabindex="1"/>');
    
    //Focusing on Generated Event
    $('#'+inputId).focus();

    //Binding the Focus Out Event to
    $('#'+inputId).focusout(function(){
        debugger;
        $('.header').html($(this).val());
     });
     
});

//Click Event to trigger dblclick on td with id = 'tableData1'
$('.btn-trigger-dbclick').click(function(){
    $('#tableData1').dblclick();
});

//Function to check Tab is Press or not
function initCheckKeypress(evt) {
    "use strict";
    var e = event || evt; // for trans-browser compatibility
    var charCode = e.which || e.keyCode;
    if (charCode === 9) {
        gridRefreshFlag = true;
        TabEdit_sourceInput = $(e.target);
        TabEdit_currentTd = TabEdit_sourceInput.parent();
        TabEdit_DOMtocheck = TabEdit_currentTd.next('td');
        movetoNextTD();
        e.preventDefault();
    }
}


//Code to Click on Next Cell
function movetoNextTD() {
    if (gridRefreshFlag && TabEdit_DOMtocheck !== null) {
        TabEdit_DOMtocheck.dblclick();
        TabEdit_currentTd.html("");
        resetmovetoNextVariable();
    }
}

//Reset Global Variable
function resetmovetoNextVariable(){
    TabEdit_sourceInput = null;
    TabEdit_currentTd = null;
    TabEdit_DOMtocheck = null;
    TabEdit_previousHour = null;
    gridRefreshFlag = false;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Focus Issue</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="header"></div>
                <table class="table table-bordered">
                    <tbody>
                        <tr id="tableRow1">
                            <th id="tableHeader1" class="custom-table-th">TH 1</th>
                            <th id="tableHeader2" class="custom-table-th">TH 2</th>
                            <th id="tableHeader3" class="custom-table-th">TH 3</th>
                        </tr>
                        <tr id="tableRow2">
                            <td id="tableData1" class="custom-table-td"></td>
                            <td id="tableData2" class="custom-table-td"></td>
                            <td id="tableData3" class="custom-table-td"></td>
                        </tr>
                    </tbody>
                </table>
                <button class="btn btn-primary btn-trigger-dbclick">Trigger</button>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Answer 2

更改您的 initCheckKeyPress 函数实现会有所帮助。我通过添加 :

来防止触发事件的默认行为来解决这个问题

e.preventDefault();

这是可行的，因为 "tab" 按键事件的默认行为是关注下一个键项。这发生在创建输入之前（如 freedom-m 正确突出显示的那样）。因此，防止这种情况会使这项工作成功。

您的最终代码如下所示：

之前

function initCheckKeypress(evt) {
"use strict";
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
if (charCode === 9) {
    gridRefreshFlag = true;
    TabEdit_sourceInput = $(e.target);
    TabEdit_currentTd = TabEdit_sourceInput.parent();
    TabEdit_DOMtocheck = TabEdit_currentTd.next('td');
    movetoNextTD();
}}

之后：

function initCheckKeypress(evt) {
"use strict";
var e = event || evt; 
e.preventDefault();// for trans-browser compatibility
var charCode = e.which || e.keyCode;
if (charCode === 9) {
    gridRefreshFlag = true;
    TabEdit_sourceInput = $(e.target);
    TabEdit_currentTd = TabEdit_sourceInput.parent();
    TabEdit_DOMtocheck = TabEdit_currentTd.next('td');
    movetoNextTD();

}}

如何在下一个 Table 单元格中使用 Tab 键设置焦点输入

How to set Focus on Input using Tab Key Press in Next Table Cell

javascript

jquery

focus

event-bubbling

event-capturing