JavaScript在Firefox中的粘贴事件中过滤非数字

Question

我有一个<input type="number" /> ，我想防止输入任何非数字字符。

<input id="app-client-id" type="number" pattern="[0-9]+" />

为了防止定期按键，可以使用

const validKeys = new Set([
    'home',
    'end',
    'pageup',
    'pagedown',
    'delete',
    'backspace',
    'arrowleft',
    'arrowright',
]);

function isValidKeypress(e) {
    // numeric characters
    if (e.charCode >= 48 && e.charCode <= 57) {
        return true;
    }

    if (e.key && validKeys.has(e.key.toLowerCase())) {
        return true;
    }

    // for allowing select all, copy, and paste
    if (e.ctrlKey) {
        return true;
    }

    return false;
}

$('#app-client-id').on('keypress', isValidKeypress);

现在剩下的就是防止粘贴非数字字符，或者理想情况下可以过滤掉非数字字符。

function filterPastedText(e) {
    let clipboardData = e.originalEvent.clipboardData,
        text = clipboardData.getData('text').replace(/[^\d]/g, '');
    clipboardData.setData('text', text);
}

$('#app-client-id').on('paste', filterPastedText);

这在Chrome / Webkit中有效。 但是，在Firefox中，它会在setData()上引发错误：

NoModificationAllowedError：不允许对此文档进行修改

关于如何告诉浏览器允许调用setData()任何想法？

如果不存在这样的方法，是否可以在不使用隐藏的textarea情况下 ，手动将过滤后的值“粘贴”到右侧光标位置的input中（并替换所选的文本，如果有的话）？ 无论是否选择了文本，我都无法检测光标在input元素中的位置。 myInput.selectionStart始终为null 。

编辑

事实证明，调用setData()实际上在Chrome中不起作用。 将类型设置为number自动过滤掉非数字字符（ “ e”，“-”和“。” 除外 ）以及我对其进行测试的字符串，但其中不包含任何这些字符。 调用setData()只会静默失败。

Answer 1

您可以采取的一种方法是，简单地允许不想要的字符暂时进入输入字段，但是监视oninput事件，在每个事件中检查输入字段的值以查找不想要的字符，如果发现任何不存在的字符，请使用其值的过滤版本。

更新：

具有讽刺意味的是，我发现，当您将input创建为type="number"而不是type="text"时，将键盘输入限制在数字上比较困难。 为什么？ 因为当您使用type="number"非数字输入仍然可以忽略，但是您不会在输入字段的值中看到那些字符-该值是有效数字，或者是空字符串。 这样您就没有机会过滤输入并保留可能存在的有效数字。

我已经创建了一个Plunker，其当前状态是我试图将文本字段限制为数字输入的尝试： http ://plnkr.co/edit/xsVQG1EzsDLMt8POCJUX?p=preview