Question

我正在努力实现一些我不确定会工作的东西。我想做的是在用户按任意字母键时更改单元格焦点。我也希望这封信出现在源单元格中，但不会出现在目标单元格中。我试图做的是：

用户通过点击标记单元格

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

用户在标记的单元格中写入

$(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.

有没有办法阻止将该字母添加到目标单元格？

提前致谢！

修改

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

Answer 1

在keyPress

之后清除关注的Cell

markedCell.innterText='';

在JQuery语法

中

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

Answer 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();
        }
    }
});

改变细胞对按键的关注

2 个答案: