Question

我的contenteditable的工作方式是从数据库（MongoDB）获取数据并在表中显示数据后，它将在每行数据的末尾有两个名为edit和delete的按钮。按下编辑后，表格行将可供用户编辑，因此在进行编辑后，用户将单击“保存”按钮，然后对服务器执行ajax调用并发送更改，然后发送数据已成功更新的响应。这是关于该表的html代码。

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

这是我的js代码。

<td>

问题是如何添加代码以使得只有数字可以添加到可信内容中？我在我的js文件中发送了我的回复，正如您在我的搜索功能中看到的那样，我正在使用此代码使其仅允许在可信的{{1}}中输入数字，但我已尝试将其放入我的{{1}}在我的搜索功能的响应中，但它仍然允许使用字母表。那么我应该把这段代码放在哪里，还是我做错了？提前谢谢。

Answer 1

为什么不直接使用输入？

 <input type="number">

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

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

这将阻止所有不是数字的字符（0-9）

Answer 2

萨拉姆

这将只允许数字

$('[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();
});

我也测试了小数。要获得允许的三个主要条件

是数字，而不是删除按钮
没有空间
不输入按钮
仅允许小数点一次

让我知道您是否在评论中遇到错误

谢谢

Answer 3

如果要在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 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 以避免退格/删除的阻止默认

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

Contenteditable仅允许编辑数字？

4 个答案: