JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

#test2 {
  margin-top: 15px;
}

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