javascript - 在 contenteditable/input 中过滤输入以将插入符号放在原来的位置之后

Question

我有一个 contenteditable 元素，我用 javascript 更新/过滤它。更新文本内容后，插入符号始终会回到开头。 A 想让它像输入元素一样工作。我设置了demo :

1. test1 - 内容可编辑元素
2. test2 - 输入元素

在这个例子中，我有一个函数可以只插入数字，如果插入其他字符，则不会显示任何内容。

在可编辑内容中输入一些数字并插入 NOT 数字后，光标(插入符号)将转到开头。如果是输入元素，光标将移至末尾。

如何实现这一点，将光标保留在原来的位置？(纯JavaScript)

function onlyNumber(element) {
  const invalidChars = /\D/g;
  ob = element.target;
  if (element.target.nodeName == "INPUT") {
    if (invalidChars.test(ob.value)) {
      ob.value = ob.value.replace(invalidChars, "");
    }
  } else if (element.target.nodeName == "TD") {
    if (invalidChars.test(ob.textContent)) {
      ob.textContent = ob.textContent.replace(invalidChars, "");
    }
  }
}

document.getElementById("test1").addEventListener("input", function(event) {
  onlyNumber(event);
})
document.getElementById("test2").addEventListener("input", function(event) {
  onlyNumber(event);
})

#test1 {
  border: 1px solid gray;
  padding: 5px;
  width: 100px;
}

#test2 {
  margin-top: 15px;
}

<table class="table">
  <tbody>
    <tr>
      <td id="test1" contenteditable="true"></td>
    </tr>
  </tbody>
</table>
<input id="test2" />

Answer 1

您可以使用 keydown 事件，并阻止除数字和箭头/删除/退格键之外的所有操作。

堆栈片段

function onlyNumber(element) {
  const invalidChars = /\D/g;
  ob = element.target;
  if (element.target.nodeName == "INPUT") {
    if (invalidChars.test(ob.value)) {
      ob.value = ob.value.replace(invalidChars, "");
    }
  } else if (element.target.nodeName == "TD") {
    if (invalidChars.test(ob.textContent)) {
      ob.textContent = ob.textContent.replace(invalidChars, "");
    }
  }
}

document.getElementById("test1").addEventListener("keydown", function(event) {
  if ((event.keyCode < 58 && event.keyCode > 47) ||
      (event.keyCode < 41 && event.keyCode > 36) ||
      event.keyCode == 8 || event.keyCode == 46) {
    return true;
  }
  event.preventDefault();
})
document.getElementById("test2").addEventListener("input", function(event) {
  onlyNumber(event);
})

#test1 {
  border: 1px solid gray;
  padding: 5px;
  width: 100px;
}

#test2 {
  margin-top: 15px;
}

<table class="table">
  <tbody>
    <tr>
      <td id="test1" contenteditable="true"></td>
    </tr>
  </tbody>
</table>
<input id="test2" />

<小时/>

另一个选项是重新定位光标:

• How to move cursor to end of contenteditable entity

• How to track caret/cursor in contenteditable?