更改按键上的单元格焦点答案

【问题标题】：Change cell focus on keypress更改按键上的单元格焦点
【发布时间】：2016-05-29 12:28:36
【问题描述】：

我正在尝试实现一些我不确定是否会奏效的事情。我想做的是在用户按下任何字母键时更改单元格焦点。我还希望这封信出现在源单元格中，但不在目标单元格中。我试图做的是：

用户通过点击来标记单元格

table.onclick = function tableMouseListener(event) {
  markedCell = event.target;
  markedCellRow = markedCell.parentNode.rowIndex;
  markedCellCol = markedCell.cellIndex;
};

用户在标记的单元格中写了一个 A

$(document).keypress(function(e){
  if (e.keyCode == 65) {
    markedCell.appendChild(document.createTextNode(String.fromCharCode(e.keyCode)));
    jumpToNextCell();
  }    
});

输入 A 后，跳转到下一个单元格并聚焦它

function jumpToNextCell() {
  table = document.getElementById('myTable');
  markedCellCol++;
  markedCell = table.rows[markedCellRow].cells[markedCellCol];
  markedCell.appendChild(document.createTextNode('\u0020'));
  markedCell.focus();
}

上述逻辑的问题在于源单元格和目标单元格现在都包含字母 A。

有什么方法可以防止字母被添加到目标单元格中？

编辑

源单元格是我标记的单元格，目标单元格是我要跳转到的单元格。

【问题讨论】：

你能解释一下source和destination单元格是什么吗？
你的 ("minimal reproducible example") HTML 和 JavaScript 是什么？否则，您会得到很多猜测，并且可能会得到零有用、可理解或直接相关的答案。此外，没有您的相关代码，这个问题是题外话，因为它都不包含您的代码，您的要求并不完全清楚，而且它也太宽泛了 -因为您实际上希望我们能够重现您现有的努力并为您的问题实施解决方案。
@RichardSilvertass 检查我的回答，如果对您有帮助，请接受。

标签： javascript html dom-events keyboard-events

【解决方案1】：

keyPress 后清除焦点单元

markedCell.innterText='';

在 JQuery 语法中

$('#markedCellSelector').val('');

【讨论】：

【解决方案2】：

我创建了一个实现整个功能的fiddle

这里是JS 代码：

var btns = Array.prototype.slice.call(document.querySelectorAll('button')),
    markedBtn;

btns.forEach(function(btn) {
    btn.addEventListener('click', function(){
        btns.forEach(function(btn) {
            btn.classList = Array.prototype.slice.call(btn.classList).filter(function(className) {
                return className !== 'marked';
            });
        });

        btn.className += ' marked';
        markedBtn = this;
    });
});

document.addEventListener('keyup', function(e) {
    var char = String.fromCharCode(e.which);

    if(markedBtn) {
        markedBtn.innerText = char;

        if(markedBtn.nextElementSibling) {
            markedBtn = markedBtn.nextElementSibling;
            markedBtn.click();
        }
    }
});

【讨论】：

这可以为带有可编辑单元格的表格实现吗？因为这就是我正在使用的。
是的，告诉我你的HTML，我会帮你实现它
见fiddle。标记一个单元格并输入“r”向右移动，输入“d”向下移动。