Question

我有一个满足的元素，我用javascript更新/过滤。更新textcontent之后，插入符号总是返回到开头。想要像输入元素一样工作。我设置了demo：

test1 - contenteditable element
test2 - 输入元素

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

将一些数字输入到contenteditable并插入一个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事件，并阻止所有数字和箭头/删除/退格。

Stack snippet

＆＃13;

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

＆＃13;

#test1 {
  border: 1px solid gray;
  padding: 5px;
  width: 100px;
}

#test2 {
  margin-top: 15px;
}

＆＃13;

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

＆＃13;

另一种选择是重新定位光标：

在contenteditable / input中过滤输入以将插入符号放在

1 个答案: