Фильтр JavaScript без цифр при вставке события в Firefox - PullRequest
Новая
       7

Фильтр JavaScript без цифр при вставке события в Firefox

0 голосов
/ 30 апреля 2018

У меня есть <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()?

Если такого метода не существует, есть ли способ вручную «вставить» отфильтрованное значение в input в правой позиции курсора (и заменить выделенный текст, если таковой имеется) без использования скрыто textarea? У меня проблемы с определением положения курсора в элементе input, независимо от того, выделен ли текст; myInput.selectionStart всегда null.

Редактировать

Оказывается, вызов setData() на самом деле не работает в Chrome. Установка типа number автоматически отфильтровывает нечисловые символы , за исключением 'e', ​​'-' и '.', И строка, на которой я тестировал, не включала ни одного из этих символов , Вызов setData() просто молчит.

1 Ответ

0 голосов
/ 30 апреля 2018

Один из подходов, который вы можете использовать, это просто позволить нежелательным символам мгновенно войти в поле ввода, но отслеживать oninput события, проверять значение поля ввода для нежелательных символов в каждом событии и, если таковые обнаружены, обновлять поле ввода с отфильтрованной версией его значения.

Обновление:

Я обнаружил, что по иронии судьбы труднее ограничить ввод с клавиатуры цифрами, когда вы создаете input как type="number", а не type="text". Зачем? Потому что когда вы используете type="number" нечисловой ввод, он все равно может ускользнуть, но вы не увидите эти символы в значении поля ввода - это либо допустимое число, либо пустая строка. Это не дает вам возможности отфильтровать ввод и сохранить действительные цифры, которые могут быть там.

Я создал Plunker с текущим состоянием моих попыток ограничить текстовое поле числовым вводом: http://plnkr.co/edit/xsVQG1EzsDLMt8POCJUX?p=preview

...