如何禁止number类型输入框输入逗号点号 复制粘贴时自动过滤对应符号

你之前的方案失效核心是type="number"输入框的原生浏览器特性：你的输入框设置了step="1"仅允许输入整数，当用户输入点号、逗号这类非法字符时，浏览器会直接将输入框的value属性置为空字符串，你在keyup阶段读取到的已经是空值，所以替换逻辑完全无法生效。

同时覆盖手动输入和粘贴场景，代码如下：

// 1. 拦截手动输入的逗号、点号
$('.numbersOnly').on('keydown', function(e) {
    // 对应键值：逗号188、主键盘点号190、小键盘点号110
    const forbiddenKeyCodes = [188, 190, 110];
    if (forbiddenKeyCodes.includes(e.keyCode)) {
        e.preventDefault();
    }
});

// 2. 处理粘贴场景，自动过滤逗号、点号
$('.numbersOnly').on('paste', function(e) {
    e.preventDefault();
    // 读取粘贴内容
    const pasteContent = (e.originalEvent || e).clipboardData.getData('text/plain');
    // 过滤所有非数字字符仅保留0-9，若只需过滤,.可改为 replace(/[,.]/g, '')
    const filteredContent = pasteContent.replace(/[^\d]/g, '');
    // 兼容光标位置插入，不破坏原有输入内容
    const startPos = this.selectionStart;
    const endPos = this.selectionEnd;
    const originVal = this.value;
    this.value = originVal.slice(0, startPos) + filteredContent + originVal.slice(endPos);
    // 调整光标位置到插入内容末尾
    this.selectionStart = this.selectionEnd = startPos + filteredContent.length;
});

如果不需要强制使用type="number"，可以将输入框改为type="text"并添加inputmode="numeric"属性，既可以唤起移动端数字键盘，又不会触发浏览器自动清空非法内容的逻辑，后续的字符过滤逻辑可以写得更简单：

<input type="text" inputmode="numeric" class="form-control numbersOnly" name="angebot" id="angebot" min="1" step="1"  placeholder="<?php the_field('language_shop_detail_button_counter_offer_placeholder', 'option'); ?>">

配套过滤逻辑：

$('.numbersOnly').on('input', function() {
    this.value = this.value.replace(/[,.]/g, '');
});

内容的提问来源于stack exchange，提问作者myrius