如何在"下一个表格单元格"中使用Tab键设置"聚焦输入"

以下是我在HTML 中使用JQuery实现的场景

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

在2个场景的情况下，我需要在下一个Cell上触发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>

发生的是：

双击-生成第一个输入并设置焦点，精细
用户按下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>

更改initCheckKeyPress函数的实现会有所帮助。我通过添加以下内容来防止触发事件的默认行为，从而修复了此问题：

e.preventDefault();

这是因为"tab"按键事件的默认行为是关注下一个按键。这发生在创建输入之前(正如freedomn-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();
}}

相关内容

最新更新

热门标签：