以下是我正在HTML中使用JQuery实现的方案
[在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/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </body> </html>
以下是我在HTML中使用JQuery实现的方案，当用户双击表单元格时，它应该在双击单元格内进行新输入[完成]，当用户使用KeyPress [Tab]并对其进行......]
$("#"+inputId)时.focus()尚不存在（在浏览器中，它在DOM中存在），因此需要等待其呈现。最简单的方法是：setTimeout(function() { $('#'+inputId).focus(); }, 10);