只允许 contenteditable 元素中的数字？答案

【问题标题】：only allow numbers in contenteditable elements?只允许 contenteditable 元素中的数字？
【发布时间】：2017-07-13 06:14:29
【问题描述】：

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

我尝试使用类似的东西：

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

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

谢谢！

【问题讨论】：

我也对这个问题感兴趣，尤其是移动设备的屏幕键盘。我希望弹出仅显示数字的屏幕键盘，而不是全键盘。
这里有关于 Making content editable 的信息... 但是，虽然通过一些编码（和大量测试）确实可以在 contenteditable 元素上实现您自己的验证，但是验证是一个主要的<input> 元素的内置功能。使用现有功能比设计自己的功能要容易得多。使用内置功能还可以确保跨平台兼容性。见Client-side form validation。

标签： javascript html jquery validation contenteditable

【解决方案1】：

为什么不直接使用输入？

 <input type="number">

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

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

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

【讨论】：

我将其作为表格数据而不是输入发送，如果不是，它将继续期待输入。至于第二个，String.fromCharCode 是什么意思？
原来e.which只是一个数字，指向一个字符。 String.fromCharCode(e.which) 将按下的键转换为相应的字符
我已经尝试过了，但它似乎不起作用。我使用类来定义表数据，当按键时，它应该执行该函数但没有任何反应，它仍然是一样的。 $(".editNumber").keypress(function() { if (isNaN(String.fromCharCode(event.which))) event.preventDefault(); });editNumber 是我的表格数据类，但没有任何变化
你忘了传递 event 参数：$(".editNumber").keypress(function(event) { ...
isNaN(' ') === false - 如果允许用户输入空格是个问题，请使用if (e.which < 48 || e.which > 57) e.preventDefault();。这将只允许字符代码 48 - 57（数字 0 - 9）。还有一点，此代码不会处理复制/剪切/粘贴和上下文菜单更改。只是想我会为任何未来的访问者注意这一点:)

【解决方案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();
});

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

是数字而不是删除按钮
不是空格
不输入按钮
只允许小数点一次

如果您遇到 cmets 中的任何错误，请告诉我

谢谢

【讨论】：

【解决方案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();
    });

【讨论】：

【解决方案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 来避免退格/删除的默认设置

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

【讨论】：