jquery 在contenteditable元素中只允许数字?

gxwragnw  于 2022-11-22  发布在  jQuery
关注(0)|答案(5)|浏览(196)

如何使contenteditable元素只允许输入数值?
我试着用这样的话:

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

...在contenteditable元素上,但仍允许输入字母字符。
谢谢你!

nr7wwzry

nr7wwzry1#

为什么不直接使用输入呢?

<input type="number">

如果您仍然想使用contenteditable,可以添加一个事件侦听器,如下所示:

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

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

nqwrtyyt

nqwrtyyt2#

萨拉姆
这将只允许数字

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

我也测试过小数。有三个主要条件可以被允许

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

让我知道,如果你面临任何错误的评论
谢谢你

ac1kyiln

ac1kyiln3#

如果 你 只 想 在 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();
    });

格式

lf3rwulv

lf3rwulv4#

如果只允许数字,可以用途:

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.键码8和46,以避免在退格/删除时防止默认值
此方法不允许使用小数,您需要修改正则表达式

6qqygrtg

6qqygrtg5#

允许数字、点、回溯

<div 
  on:keydown={(event) => {
    if (
      event.code.includes('Digit') ||
      event.code === 'Backspace' ||
      event.code === 'Period'
    ) {
      console.log(e)
    } else {
      event.preventDefault()
    }
  }}
>
  foo
</div>

相关问题