Как я могу заблокировать или ограничить специальные символы из полей ввода с помощью jquery?

Question

Как заблокировать ввод специальных символов в поле ввода с помощью jquery?

Answer 1

Простой пример использования регулярного выражения, которое вы можете изменить, чтобы разрешить / запретить все, что вам нравится.

$('input').on('keypress', function (event) {
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

Answer 2

Я искал ответ, в котором ввод ограничивался только буквенно-цифровыми символами, но все же позволял использовать управляющие символы (например, backspace, delete, tab) и copy + paste. Ни один из предоставленных ответов, которые я пробовал, не удовлетворял всем этим требованиям, поэтому я придумал следующее, используя событие input.

$('input').on('input', function() {
  $(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});

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

$('input').on('input', function() {
  var c = this.selectionStart,
      r = /[^a-z0-9]/gi,
      v = $(this).val();
  if(r.test(v)) {
    $(this).val(v.replace(r, ''));
    c--;
  }
  this.setSelectionRange(c, c);
});

Answer 3

Краткий ответ: предотвратить событие нажатия клавиши:

$("input").keypress(function(e){
    var charCode = !e.charCode ? e.which : e.charCode;

    if(/* Test for special character */ )
        e.preventDefault();
})

Длинный ответ: Используйте такой плагин, как jquery.alphanum

При выборе решения следует учитывать несколько моментов:

• Вставленный текст
• Управляющие символы, такие как backspace или F5, могут быть запрещены вышеуказанным кодом.
• é, í, ä и т. Д.
• арабский или китайский ...
• Совместимость с различными браузерами

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

$("input").alphanum();

Или для более детального управления добавьте некоторые настройки:

$("#username").alphanum({
    allow      : "€$£",
    disallow   : "xyz",
    allowUpper : false
});

Надеюсь, это поможет.

Answer 4

Используйте атрибут ввода шаблона HTML5!

<input type="text" pattern="^[a-zA-Z0-9]+$" />

Answer 5

Посмотрите на буквенно-цифровой плагин jQuery. https://github.com/KevinSheedy/jquery.alphanum

//All of these are from their demo page
//only numbers and alpha characters
$('.sample1').alphanumeric();
//only numeric
$('.sample4').numeric();
//only numeric and the .
$('.sample5').numeric({allow:"."});
//all alphanumeric except the . 1 and a
$('.sample6').alphanumeric({ichars:'.1a'});

Answer 6

Используйте регулярные выражения, чтобы разрешить / запретить что-либо. Кроме того, для чуть более надежной версии, чем принятый ответ, можно разрешить символы, которые не имеют значения ключа, связанного с ними (возврат, табуляция, клавиши со стрелками, удаление и т. Д.), Сначала пройдя событие нажатия клавиши и проверять ключ на основе кода ключа вместо значения.

$('#input').bind('keydown', function (event) {
        switch (event.keyCode) {
            case 8:  // Backspace
            case 9:  // Tab
            case 13: // Enter
            case 37: // Left
            case 38: // Up
            case 39: // Right
            case 40: // Down
            break;
            default:
            var regex = new RegExp("^[a-zA-Z0-9.,/ $@()]+$");
            var key = event.key;
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
            break;
        }
});

Answer 7

Ваше текстовое поле:

<input type="text" id="name">

Ваш JavaScript:

$("#name").keypress(function(event) {
    var character = String.fromCharCode(event.keyCode);
    return isValid(character);     
});

function isValid(str) {
    return !/[~`!@#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}

Answer 8

Я использую этот код, модифицируя другие, которые я видел. Только для пользователя, пишущего, если нажатая клавиша или вставленный текст проходят шаблонный тест (совпадение) (этот пример - ввод текста, который допускает только 8 цифр)

$("input").on("keypress paste", function(e){
    var c = this.selectionStart, v = $(this).val();
    if (e.type == "keypress")
        var key = String.fromCharCode(!e.charCode ? e.which : e.charCode)
    else
        var key = e.originalEvent.clipboardData.getData('Text')
    var val = v.substr(0, c) + key + v.substr(c, v.length)
    if (!val.match(/\d{0,8}/) || val.match(/\d{0,8}/).toString() != val) {
        e.preventDefault()
        return false
    }
})

Answer 9

Напишите некоторый код JavaScript на событии onkeypress текстового поля. согласно требованию разрешить и ограничить символ в вашем текстовом поле

function isNumberKeyWithStar(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 42)
        return false;
    return true;
}
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
function isNumberKeyForAmount(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46)
        return false;
    return true;
}

Answer 10

это пример, который запрещает пользователю вводить символ "а"

$(function() {
$('input:text').keydown(function(e) {
if(e.keyCode==65)
    return false;

});
});

ссылки на коды ключей здесь:
http://www.expandinghead.net/keycode.html