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

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

вопрос задан 21.05.2009
Nerd Stalker
484 репутация

16 ответов


  • 123 рейтинг

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

    $('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;
        }
    });
    
    ответ дан Dale, с репутацией 1658, 12.01.2012
  • 46 рейтинг

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

    $("input").keypress(function(e){
        var charCode = !e.charCode ? e.which : e.charCode;
    
        if(/* Test for special character */ )
            e.preventDefault();
    })
    

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

    Есть несколько вещей, которые следует учитывать при выборе решения:

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

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

    $("input").alphanum();
    

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

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

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

    ответ дан KevSheedy, с репутацией 1870, 7.02.2013
  • 45 рейтинг

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

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

    Редактировать:
    Как указывалось в комментариях 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);
    });
    
    ответ дан rexmac, с репутацией 1104, 6.02.2013
  • 12 рейтинг

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

    
    
    ответ дан keepitreal, с репутацией 371, 4.03.2015
  • 9 рейтинг

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

    //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'});
    
    ответ дан RSolberg, с репутацией 21033, 21.05.2009
  • 8 рейтинг

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

    $('#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;
            }
    });
    
    ответ дан James Mart, с репутацией 318, 28.06.2015
  • 6 рейтинг

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

    
    

    Ваш JavaScript:

    $("#name").keypress(function(event) {
        var character = String.fromCharCode(event.keyCode);
        return isValid(character);     
    });
    
    function isValid(str) {
        return !/[~`!@#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
    }
    
    ответ дан chandler, с репутацией 563, 10.07.2017
  • 3 рейтинг

    Напишите некоторый код 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;
    }
    
    ответ дан pratik1020, с репутацией 176, 23.05.2014
  • 3 рейтинг

    Я использую этот код, модифицируя другие, которые я видел. Только великий пользователь пишет, если нажатая клавиша или вставленный текст проходят шаблонный тест (совпадение) (этот пример - ввод текста, который допускает только 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
        }
    })
    
    ответ дан Pablo Padron, с репутацией 31, 3.10.2017
  • 2 рейтинг

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

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

    кодов ключей ссылки здесь:
    http: // www. expandinghead. нетто / скан. HTML

    ответ дан does_not_exist, с репутацией , 21.05.2009
  • 1 рейтинг

    Хотел прокомментировать комментарий Алекса к ответу Дейла. Не возможно (сначала нужно сколько "реп"? Это не случится очень скоро. , странная система. ) Итак, как ответ:

    Backspace можно добавить, добавив \ b к определению регулярного выражения, например: [a-zA-Z0-9 \ b]. Или вы просто разрешаете весь латинский диапазон, включая более или менее что-нибудь «не экзотические» символы (также управляйте символами, такими как backspace): ^ [\ u0000- \ u024F \ u20AC] + $

    Только реальный символ Юникода вне латиницы - это знак евро (20ac), добавьте все, что вам может понадобиться.

    Чтобы также обрабатывать ввод, введенный с помощью копирования и вставки, просто также свяжите с событием «change» и проверьте вход там тоже - удалите его или зачистите / выдав сообщение об ошибке типа «неподдерживаемые символы». ,

    if (!regex.test($j(this).val())) {
      alert('your input contained not supported characters');
      $j(this).val('');
      return false;
    }
    
    ответ дан hyphan, с репутацией 91, 15.01.2013
  • 1 рейтинг

    только цифры:

    $ ('input. время'). keydown (function (e) {if (e. keyCode & gt; = 48 & amp; & amp; е. keyCode & lt; = 57) { вернуть истину; } еще { вернуть ложь; }});

    или для времени, включающего ":"

    $ ('input. время'). keydown (function (e) {if (e. keyCode & gt; = 48 & amp; & amp; е. keyCode & lt; = 58) { вернуть истину; } еще { вернуть ложь; }});

    , включая удаление и возврат:

    $ ('input. время'). keydown (function (e) {if ((e. keyCode & gt; = 46 & amp; & amp; е. keyCode & lt; = 58) || е. keyCode == 8) {return true; } еще { вернуть ложь; }});

    к сожалению, не заставить его работать на iMAC

    ответ дан Jonathan Joosten, с репутацией 1279, 30.07.2012
  • 1 рейтинг

    Да, вы можете сделать с помощью jQuery как:

    
    
    
    

    и скрипт для вашей user_availability. php будет:

    <>,|=_+¬-]/', $user_name)){
        echo "invalid";
    }else{
        $select = mysql_query("SELECT user_id FROM staff");
    
        $i=0;
        //this varible contains the array of existing users
        while($fetch = mysql_fetch_array($select)){
            $existing_users[$i] = $fetch['user_id'];
            $i++;
        }
    
        //checking weather user exists or not in $existing_users array
        if (in_array($user_name, $existing_users))
        {
            //user name is not availble
            echo "no";
        } 
        else
        {
            //user name is available
            echo "yes";
        }
    }
    ?>
    

    Я попытался добавить для / и \ , но не удалось.


    Вы также можете сделать это с помощью javascript & amp; код будет:

    
    
    
    
    
        User id : 
    
    ответ дан PHP Ferrari, с репутацией 6435, 20.09.2011
  • 1 рейтинг

    Ограничить специальные символы при нажатии клавиш. Вот тестовая страница для кодов ключей: http: // www. квадрат. сеть / JavaScript / тесты / KeyCode. HTML

    var specialChars = [62,33,36,64,35,37,94,38,42,40,41];
    
    some_element.bind("keypress", function(event) {
    // prevent if in array
       if($.inArray(event.which,specialChars) != -1) {
           event.preventDefault();
       }
    });
    

    В Angular мне нужен был правильный формат валюты в моем текстовом поле. Мое решение:

    var angularApp = angular.module('Application', []);
    
    ...
    
    // new angular directive
    angularApp.directive('onlyNum', function() {
        return function( scope, element, attrs) {
    
            var specialChars = [62,33,36,64,35,37,94,38,42,40,41];
    
            // prevent these special characters
            element.bind("keypress", function(event) {
                if($.inArray(event.which,specialChars) != -1) {
                    prevent( scope, event, attrs)
                 }
            });
    
            var allowableKeys = [8,9,37,39,46,48,49,50,51,52,53,54,55,56
                ,57,96,97,98,99,100,101,102,103,104,105,110,190];
    
            element.bind("keydown", function(event) {
                if($.inArray(event.which,allowableKeys) == -1) {
                    prevent( scope, event, attrs)
                }
            });
        };
    })
    
    // scope.$apply makes angular aware of your changes
    function prevent( scope, event, attrs) {
        scope.$apply(function(){
            scope.$eval(attrs.onlyNum);
            event.preventDefault();
        });
        event.preventDefault();
    }
    

    В HTML добавить директиву

    
    

    и в соответствующем угловом контроллере я разрешаю только один период, преобразую текст в число и добавляю округление чисел на «размытие»

    ...
    
    this.updateRequest = function() {
        amount = $scope.amount;
        if (amount != undefined) {
            document.getElementById('spcf').onkeypress = function (e) {
            // only allow one period in currency
            if (e.keyCode === 46 && this.value.split('.').length === 2) {
                return false;
            }
        }
        // Remove "." When Last Character and round the number on blur
        $("#amount").on("blur", function() {
          if (this.value.charAt(this.value.length-1) == ".") {
              this.value.replace(".","");
              $("#amount").val(this.value);
          }
          var num = parseFloat(this.value);
          // check for 'NaN' if its safe continue
          if (!isNaN(num)) {
            var num = (Math.round(parseFloat(this.value) * 100) / 100).toFixed(2);
            $("#amount").val(num);
          }
        });
        this.data.amountRequested = Math.round(parseFloat(amount) * 100) / 100;
    }
    
    ...
    
    ответ дан Ivor Scott, с репутацией 102, 16.05.2016
  • 0 рейтинг

    Для замены специальных символов, пробела и преобразования в нижний регистр

    $(document).ready(function (){
      $(document).on("keyup", "#Id", function () {
      $("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase());
     }); 
    });
    
    ответ дан GirishBabuC, с репутацией 416, 12.06.2016
  • 0 рейтинг
    [User below code to restrict special character also    
    
    $(h.txtAmount).keydown(function (event) {
            if (event.shiftKey) {
                event.preventDefault();
            }
            if (event.keyCode == 46 || event.keyCode == 8) {
            }
            else {
                if (event.keyCode < 95) {
                    if (event.keyCode < 48 || event.keyCode > 57) {
                        event.preventDefault();
                    }
                }
                else {
                    if (event.keyCode < 96 || event.keyCode > 105) {
                        event.preventDefault();
                    }
                }
            }
    
    
        });]
    
    ответ дан Govind Pant, с репутацией 1, 20.01.2017