我有一个 contenteditable 元素，我用 javascript 更新/过滤它。更新文本内容后，插入符号始终会回到开头。 A 想让它像输入元素一样工作。 我设置了demo :
- test1 - 内容可编辑元素
- 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" />最佳答案
您可以使用 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" />另一个选项是重新定位光标:
关于javascript - 在 contenteditable/input 中过滤输入以将插入符号放在原来的位置之后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50221487/