只允许 contenteditable 元素中的数字？

Question

如何让 contenteditable 元素只允许输入数值？

我尝试使用类似的东西：

onkeypress='return event.charCode >= 48 && event.charCode <= 57'

...在 contenteditable 的元素上，但它仍然允许输入字母字符。

谢谢！

Answer 1

为什么不直接使用输入？

 <input type="number">

如果你仍然想使用 contenteditable，你可以像这样添加一个事件监听器：

$("#myeditablediv").keypress(function(e) {
    if (isNaN(String.fromCharCode(e.which))) e.preventDefault();
});

这将阻止所有非数字字符 (0-9)

Answer 2

如果您只想在 contenteditable div 中输入 0-9，那么您可以使用此代码。此代码还阻止用户将粘贴复制到字段中

<div contenteditable id="myeditablediv"  oncopy="return false" oncut="return false" onpaste="return false">10</div>

Javascript

$("#myeditablediv").keypress(function(e) {
        if (isNaN(String.fromCharCode(e.which))) e.preventDefault();
    });

如果您想输入小数点而不是数字，则可以使用此 javascript 代码

 $("#myeditablediv").keypress(function(e) {
        var x = event.charCode || event.keyCode;
        if (isNaN(String.fromCharCode(e.which)) && x!=46) e.preventDefault();
    });

Answer 3

萨拉姆

这将只允许数字

$('[contenteditable="true"]').keypress(function(e) {
    var x = event.charCode || event.keyCode;
    if (isNaN(String.fromCharCode(e.which)) && x!=46 || x===32 || x===13 || (x===46 && event.currentTarget.innerText.includes('.'))) e.preventDefault();
});

我也测试过小数。获得许可的三大条件

是一个数字而不是删除按钮
不是Space
没有输入按钮
只允许使用小数点一次

如果您在评论中遇到任何错误，请告诉我

谢谢

Answer 4

如果你只想允许数字，你可以使用：

if (e.which < 48 || e.which > 57) e.preventDefault();

如果您想启用键盘号码，请使用此代码：

if (!e.key.match(/^[0-9]/g) && e.keyCode !== 8 && e.keyCode !== 46) {
    e.preventDefault();
}

例如，正则表达式以“^”开头以防止 F5 起作用。我们添加 e.keycode 8 和 46 以避免 backspace/delete

上的阻止默认值

此方法不允许小数，您需要为其修改正则表达式

只允许 contenteditable 元素中的数字？

only allow numbers in contenteditable elements?

html

javascript

validation

jquery

contenteditable