ограничение ввода текста javascript

Question

Я хочу ограничить вводимые символы для текстового поля [a-z0-9_-].Однако всякий раз, когда, если это сделать, такие кнопки, как Backspace и клавиши со стрелками, не работают.Я нашел несколько попыток на этом и других сайтах, но они либо не работают должным образом во всех браузерах, либо используют черный список.Например, пример веб-сайта W3Schools черные списки номеров.Есть ли способ использовать белый список (тот, что приведен выше) и по-прежнему разрешать такие клавиши, как backspace, стрелки, home, end и т. Д.?Или мне нужно добавить все коды клавиш, которые соответствуют ключам, которые я хочу разрешить?Я делаю что-то вроде этого (это сокращено для простоты).

РЕДАКТИРОВАТЬ - Добавлен код

 <input type="text" onkeypress="return checkInput();">
    function checkInput(){
        return /[a-z0-9_-]/gi.test(String.fromCharCode(window.event.keyCode));
    }

Спасибо

Answer 1

Вы не предоставили никаких примеров кода, поэтому трудно быть конкретным в ответе, но в качестве общей стратегии попробуйте следующее: вместо того, чтобы пытаться внести символы в белый список, которые могут быть введены во время их ввода, проверьте правильностьсодержимое текстового поля после каждого нажатия клавиши, чтобы убедиться, что оно все еще содержит допустимые символы.Если этого не произойдет, удалите последний введенный символ.

Этот подход позволит использовать специальные клавиши, такие как клавиша возврата и т. Д., И в то же время достичь того, на что это похоже, что вы действительно ищете: действительное значение втекстовое поле.

Answer 2

Да, вы можете ограничить ввод символов. Например, создайте функцию, которая проверяет, что происходит, возвращает true, если все в порядке, и false, если нет:

// return true for 1234567890A-Za-z - _
function InputCheck(e) {
    if ((e.shiftKey && e.keyCode == 45) || e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        if (e.which == 45 || e.which == 95 || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122))
            return true;
        return false;
    }
    return true;
}

когда у вас есть функция, подключите ее к вводу (это с помощью jQuery):

$('#InputID').keypress(InputCheck);

Вы можете сделать чек настолько сложным, насколько захотите, например, это позволит получить денежные значения в долларах США:

function InputCheck(e) {
    if ((e.shiftKey && e.keyCode == 45) || e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46 && e.which != 36) {
        return false;
    }
    // . = 46
    // $ = 36
    var text = $(this).val();

    // Dollar sign first char only
    if (e.which == 36 && text.length != 0) {
        return false;
    }

    // Only one decimal point
    if (e.which == 46 && text.indexOf('.') != -1) {
        return false;
    }

    // Only 2 numbers after decimal
    if (text.indexOf('.') != -1 && (text.length - text.indexOf('.')) > 2) {
        return false;
    }

    return true;
}

Answer 3

Просто измените регулярное выражение в примере на что-то вроде этого:

numcheck = /[^a-z0-9_-]/;

Или еще лучше, избегайте двойного отрицания с помощью:

numcheck = /[a-z0-9_-]/;
return numcheck.test(keychar);

Затем вы можете посмотреть коды клавишbackspace и т. д. и проверьте их тоже:

if (keychar === 8) return true;
...

Или даже поместите их в регулярное выражение:

numcheck = /[a-z0-9_\x08-]/;

Answer 4

Добавьте этот код в событие onkeypress.

    var code;
    document.all ? code = e.keyCode : code = e.which;
    return ((code > 64 && code < 91) || (code > 96 && code < 123) || code == 8 || code == 32 || (code >= 48 && code <= 57));

Для совместимости с браузером, вы можете добавить var k = e.keyCode == 0? e.charCode: e.keyCode;

Answer 5

Вы можете нажимать любую понравившуюся клавишу, пока вы удерживаете значение от включения чего-либо, чего нет в белом списке.