Question

我的桌子有点问题。它包含可编辑的空单元格。我希望支持的方案如下：

标记单元格并键入R. R应出现在标记的单元格中。右边的邻居单元应该获得焦点并保持空白。
标记单元格并键入D. D应出现在标记的单元格中。下面的相邻单元格应该获得焦点并保持空白。

当我尝试实现此功能时，字母会出现在标记的单元格中，并且邻居会获得焦点。但该字母也出现在相邻单元格中。这可以在以下代码段中演示：

<h:form>
    <b:dataTable value = "#{formBean.formularios}" var = "formulario" id = "dataTableFormularios">
        <p:column>
            <f:facet name = "header">
                <h:outputText value = ""/>
            </f:facet>
                <b:selectBooleanCheckbox value = "{#formulario.id}"/>
        </p:column>
        <p:column>
            <f:facet name = "header">
                <h:outputText value = "Nombre Formulario"/>
            </f:facet>
            <h:form>
                <p:commandLink update = "..." process="@this" action="..." value = "#{formulario.nombre}"/>
            </h:form>                            
        </p:column>
    </b:dataTable>
    <b:commandButton .../>
</h:form>

var markedCell;
var markedCellRow;
var markedCellCol;
var table = document.getElementById('myTable');
table.onclick = function tableMouseListener(event) {
  markedCell = event.target;
  markedCellRow = markedCell.parentNode.rowIndex;
  markedCellCol = markedCell.cellIndex;
};
document.body.addEventListener('keypress', function(e) {
  if (e.keyCode == 114) {
    //Jump to the Right when the 'R' key is pressed
    markedCell.appendChild(document.createTextNode(String.fromCharCode(e.keyCode)));
    markedCellCol++;
    markedCell = table.rows[markedCellRow].cells[markedCellCol];
    markedCell.focus();
  }
  if (e.keyCode == 100) {
    //Jump Down when the 'D' key is pressed
    markedCell.appendChild(document.createTextNode(String.fromCharCode(e.keyCode)));
    markedCellRow++;
    markedCell = table.rows[markedCellRow].cells[markedCellCol];
    markedCell.focus();
  }
});

#myTable tr td {
  width: 55px;
  height: 55px;
  border: 1px solid black;
  text-align: center;
  text-transform: capitalize;
  font-size: 32px;
  color: black;
}

我认为正确的解决方案可能是监听单元格中的内容更改并清除它。但我不知道该怎么做。或许我应该在每个单元格中放置不可见的输入字段。

感谢任何帮助！

Answer 1

当您要自己填写内容时，您需要阻止keypress事件的默认操作：

e.preventDefault();

更新了代码段（请参阅后面的说明）：

＆＃13;

var markedCell;
var markedCellRow;
var markedCellCol;
var table = document.getElementById('myTable');
table.onclick = function tableMouseListener(event) {
  markedCell = event.target;
  markedCellRow = markedCell.parentNode.rowIndex;
  markedCellCol = markedCell.cellIndex;
};
document.body.addEventListener('keypress', function(e) {
  if (e.keyCode == 114) {
    //Jump to the Right when the 'R' key is pressed
    markedCell.appendChild(document.createTextNode(String.fromCharCode(e.keyCode)));
    markedCellCol++;
    markedCell = table.rows[markedCellRow].cells[markedCellCol];
    markedCell.focus();
    e.preventDefault();
  }
  if (e.keyCode == 100) {
    //Jump Down when the 'D' key is pressed
    markedCell.appendChild(document.createTextNode(String.fromCharCode(e.keyCode)));
    markedCellRow++;
    markedCell = table.rows[markedCellRow].cells[markedCellCol];
    markedCell.focus();
    e.preventDefault();
  }
});

＆＃13;

#myTable tr td {
  width: 55px;
  height: 55px;
  border: 1px solid black;
  text-align: center;
  text-transform: capitalize;
  font-size: 32px;
  color: black;
}

＆＃13;

<table id="myTable">
  <tr>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
  </tr>
  <tr>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
  </tr>
  <tr>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
  </tr>
  <tr>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
    <td contentEditable="true"></td>
  </tr>
</table>

＆＃13;

您可能还想了解当您在最后一行处理d或在最右侧列中使用r时会发生什么情况;现在，您假设一个单元格将存在于您所在单元格的下方（d）或右侧（r），但当然是这样的并非总是如此。

听取内容的变化

1 个答案: