Как установить фокус на ввод с помощью нажатия клавиши Tab в ячейке Next Table - PullRequest
Новая
       12

Как установить фокус на ввод с помощью нажатия клавиши Tab в ячейке Next Table

0 голосов
/ 20 апреля 2020

Ниже приведены сценарии ios Я использую JQuery в HTML

  • Когда пользователь дважды щелкает ячейку таблицы, он должен ввести новый вход в ячейку с двойным щелчком [Готово]
  • Когда пользователь нажимает клавишу [Tab] и он должен перейти к следующей ячейке [Готово]

В случае 2-х сценариев мне нужно вызвать событие dblclick() на следующем Ячейка, которая создает внутри него элемент ввода, но не может выполнить фокусировку внутри элемента ввода.

Я попытался отладить этот сценарий, но не смог понять, почему это происходит.

I создали кнопку и написали функцию щелчка, которая вызывает 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>

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020

Изменение вашей функции initCheckKeyPress поможет. Я исправил это, предотвратив поведение по умолчанию для инициируемого события, добавив: 

e.preventDefault();

Это работает, потому что поведение по умолчанию для события нажатия клавиши «Tab» состоит в том, чтобы сосредоточиться на следующем ключевом элементе. Это происходит до того, как ввод будет создан (как правильно подсвечено на Libern-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();

}}
0 голосов
/ 20 апреля 2020

Что происходит так:

  • двойной щелчок - генерирует первый ввод и устанавливает фокус, отлично
  • пользователь нажимает вкладку - код, который проверяет нажатие вкладки перед системным событием обрабатывает и создает 2-й вход и устанавливает фокус - система затем продолжает действие с вкладкой по умолчанию и отключает 2-й вход

Исправление заключается в отмене системного события по умолчанию после создания 2-го входа: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...