1

虽然在第 4 行中快速键入文本（“Apple”），但自动选择无法按预期正常工作。但是在编辑单个文本时，它按预期工作（选择有效）。请检查以下 html 示例

https://jsplayground.syncfusion.com/3ruatvy0

HTML5 可编辑表格

苹果橙芒果 
</table>

 <script>
      
     
         var data = [];

$("table tr").each(function(i, v){
    $(this).children('td').each(function(ii, vv){
        data.push($(this).text());
    }); 
})
console.log(data);
           document.getElementById("table").addEventListener("keyup", event => {
      for (var i = data.length -1 ; i > 0; i--) {
        var cell = data[i - 1];
        if (
          event.key == "Backspace" ||
          event.key == "Delete" ||
          event.key == "Escape"
        ) {
          return;
        } else if (cell) {
          var elem = document.getElementById("editable");
          var textLen = elem.innerHTML.length;
          if (
            elem.innerHTML.toUpperCase() ==
            cell.toUpperCase().slice(0, textLen)
          ) {
            elem.innerText = cell;
            var startNode = document.getElementById(
              "editable"
            ).firstChild;
            startNode.nodeValue = startNode.nodeValue.trim();
            var range = document.createRange();
            range.setStart(startNode, textLen);
            range.setEnd(startNode, startNode.textContent.length);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
            return;
          }
        } else return;
      }
    });
   
    </script>
4

0 回答 0