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


Ответы:


133

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

$('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;
    }
});

49
Это не работает для вставленного текста и может также помешать пользователю использовать нетекстовые нажатия клавиш, такие как backspace, клавиши со стрелками и т. Д.
bendytree 02

6
Это не позволит использовать backspace в firefox
Alex

Не работает с испанскими словами, такими как: avión (самолет), árbol (дерево) и т. Д.
nikoskip

Он не работает в последней версии браузера Firefox, но отлично работает в Chrome
Phoenix

Это решение работает для меня с элементом Bootstrap-TagsInput. Чтобы решить проблему вставки, вы можете просто добавить «вставить» в список параметров события следующим образом: $ ('input'). On ('keypress, paste' ', () => ........
Jim22150

60

Я искал ответ, который ограничивал ввод только буквенно-цифровыми символами, но по-прежнему позволял использовать управляющие символы (например, backspace, delete, tab) и copy + paste. Ни один из представленных ответов, которые я попробовал, не удовлетворял всем этим требованиям, поэтому я придумал следующее, используя 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);
});

1
+1 Я просматривал ответы в поисках такого ответа, иначе я бы отправил свой ответ. Этот ответ мгновенно отфильтровывает любые запрещенные символы! Большой!
emilhem

2
+1 Работает для вставленного текста, не мешает клавишам возврата и удаления FF и не полагается на event.whichили event.keycode! Хотел бы я +10!
rinogo 08

3
... НО в Chrome и IE, когда вы вводите новые символы или используете клавиши Backspace и Delete в середине вводимого текста , курсор перемещается в конец текста ...: / Есть ли простой способ обхода этот? Я так хотел, чтобы это сработало!
rinogo 08

Так близко ... у этого кода очень странное поведение в Chrome Mobile. Курсор перемещается по первой набранной букве и по возврату.
Juliano

2
@Juliano Интересно, что selectionStart всегда возвращает 0 в Chrome Mobile, независимо от того, где в данный момент находится курсор / каретка. Я не уверен (пока), является ли это ошибкой или предполагаемым поведением. В настоящее время я изучаю эту проблему и обновлю свой ответ или комментарий здесь, когда узнаю больше.
rexmac

48

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

$("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
});

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


1
Круто, чувак, круто. Мне просто нужно было добавить параметр для включения / отключения символа косой черты ('/'), поскольку он не работал при установке его в allowнастройках. Но в этом прелесть плагинов jquery в том, что вы можете изменять их в соответствии со своими потребностями. Спасибо!
Адриан Мариника

Спасибо, Адриан. Кстати, я просто попытался включить косую черту с помощью этой allowопции, и у меня это сработало, используя этот код: $('#firstName').alphanum({allow: "/"});Есть ли шанс, что вы могли бы предоставить дополнительную информацию? Если есть ошибка или проблема с документами, было бы неплохо исправить это. Cheers
KevSheedy

Привет, КевШиди, спасибо, что нашли время проверить это. Извините, я недостаточно ясно дал понять. Проблема была в том, что у меня тоже было allowOtherCharSets: falseи allowCaseless: false. Это мешало установленным настройкам allow. С моей точки зрения, я считаю, что этот allowвариант должен наложить вето на все другие варианты (например, allowOtherCharSetsили allowCaseless). Поэтому, если вы укажете символ в allowпараметре, он должен быть разрешен независимо от других параметров, установленных в объекте конфигурации. То же самое и с disallow. Но это только мое мнение. :) Ура снова! :)
Адриан Мариника

Хорошее замечание, Адриан. Я пошел вперед и опубликовал исправление в v1.0.6 , чтобы сделать allowи disallowиметь более высокий приоритет. Это проблема №7 . Надеюсь, это поможет
KevSheedy

6
"поэтому я пошел дальше и написал jquery.alphanum" Замечательно!
Феликс

14

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

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

11
Хотя это решение предотвращает отправку нежелательных символов, оно не предотвращает ввод нежелательных символов в поле ввода.
rexmac

1
Также существует риск, что пользователь не использует браузер HTML5.
Капитан Кенпачи,

Исходя из опыта пользовательского опыта, многие люди ненавидят больше, чем ограничение в том, что они могут печатать, - это то, что вы потом сделали это неправильно. - Принудительный ввод предназначен для уменьшения количества сообщений об ошибках и недопустимых уведомлений.
Julix

1
@Julix Это случай от случая к случаю. Есть некоторые поля, которые могут быть только числовыми (цена или сумма в любой валюте и т. Д.), Где нет смысла прослушивать ввод буквенных символов. Но да, на самом деле мой был не решением проблемы OP, а простым и приятным способом помочь с проблемой UX.
keepitreal

13

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

<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);
}

@Bhargav Рао, я удалил другой дубликат пост и повторно отправил этот, потому что это один был более подходящим, спасибо за указание , что из
Чандлер

11

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

$('#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;
        }
});

11

Взгляните на буквенно-цифровой плагин 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'});

Есть ли для писем? Обычно я использую nan только для цифр (например, почтовый индекс или телефон)

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;
}


1
Это работает, если я печатаю вручную. Но я могу вставить скопированные специальные символы.
Сунил Гарг,

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
    }
})

почему !e.charCode ? e.which : e.charCodeа не просто e.charCode ? e.charCode : e.which?
Массимилиано Краус

какие изменения нужно внести для принятия десятичных чисел?
ubm

2

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

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

});
});

Ссылка на коды клавиш здесь:
http://www.expandinghead.net/keycode.html


Я бы подумал, что все коды клавиш, которые вы не хотите разрешать, могут оказаться непосильными, чтобы попытаться ими управлять.
RSolberg

Если вы хотите, чтобы кто-то мог вводить только цифры от 1 до 5, вы в конечном итоге управляете 5 кодами клавиш в своем коде.
RSolberg

2
На самом деле это неплохой план, если AlphaNumeric не для вас. Я заставил его работать с оператором switch / case. В этом примере запрещены символы, недопустимые в именах каталогов: $ ('input [type =' text '], textarea'). Keydown (function (ev) {switch (ev.keyCode) {case 47: case 92: case 63: case 37: case 42: case 59: case 124: case 34: case 60: case 62: return false;};});
M Miller

@ user434917, ваш код не работает, когда я тестирую его с помощью мобильного Chrome-браузера Android. у вас есть какое-то решение ..?
Пранеш Джанартанан

2
$(function(){
      $('input').keyup(function(){
        var input_val = $(this).val();
        var inputRGEX = /^[a-zA-Z0-9]*$/;
        var inputResult = inputRGEX.test(input_val);
          if(!(inputResult))
          {     
            this.value = this.value.replace(/[^a-z0-9\s]/gi, '');
          }
       });
    });

1

Да, вы можете использовать jQuery как:

<script>
$(document).ready(function()
{
    $("#username").blur(function()
    {
        //remove all the class add the messagebox classes and start fading
        $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
        //check the username exists or not from ajax
        $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
        {
          if(data=='empty') // if username is empty
          {
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('Empty user id is not allowed').addClass('messageboxerror').fadeTo(900,1);
            });
          }
          else if(data=='invalid') // if special characters used in username
          {
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('Sorry, only letters (a-z), numbers (0-9), and periods (.) are allowed.').addClass('messageboxerror').fadeTo(900,1);
            });
          }
          else if(data=='no') // if username not avaiable
          {
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('User id already exists').addClass('messageboxerror').fadeTo(900,1);
            });     
          }
          else
          {
            $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('User id available to register').addClass('messageboxok').fadeTo(900,1); 
            });
          }

        });

    });
});
</script>
<input type="text" id="username" name="username"/><span id="msgbox" style="display:none"></span>

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

<?php
include'includes/config.php';

//value got from the get method
$user_name = trim($_POST['user_name']);

if($user_name == ''){
    echo "empty";
}elseif(preg_match('/[\'^£$%&*()}{@#~?><>,|=_+¬-]/', $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, и код будет:

<!-- Check special characters in username start -->
<script language="javascript" type="text/javascript">
function check(e) {
    var keynum
    var keychar
    var numcheck
    // For Internet Explorer
    if (window.event) {
        keynum = e.keyCode;
    }
    // For Netscape/Firefox/Opera
    else if (e.which) {
        keynum = e.which;
    }
    keychar = String.fromCharCode(keynum);
    //List of special characters you want to restrict
    if (keychar == "'" || keychar == "`" || keychar =="!" || keychar =="@" || keychar =="#" || keychar =="$" || keychar =="%" || keychar =="^" || keychar =="&" || keychar =="*" || keychar =="(" || keychar ==")" || keychar =="-" || keychar =="_" || keychar =="+" || keychar =="=" || keychar =="/" || keychar =="~" || keychar =="<" || keychar ==">" || keychar =="," || keychar ==";" || keychar ==":" || keychar =="|" || keychar =="?" || keychar =="{" || keychar =="}" || keychar =="[" || keychar =="]" || keychar =="¬" || keychar =="£" || keychar =='"' || keychar =="\\") {
        return false;
    } else {
        return true;
    }
}
</script>
<!-- Check special characters in username end -->

<!-- in your form -->
    User id : <input type="text" id="txtname" name="txtname" onkeypress="return check(event)"/>

2
Чувак, ты добавил кучу лишнего кода, который, вероятно, бесполезен. Можете ли вы сократить его до минимума? И он спрашивал о jQuery, я не уверен, актуален ли PHP.
Саймон Ист

@PHP Ferrari: я использую код javascript, ваш код работает нормально, как я могу отобразить всплывающее сообщение с предупреждением, если клиент вводит специальный символ. Сообщение типа «Использование специальных символов запрещено».
Gem

1

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

$ ('input.time'). keydown (function (e) {if (e.keyCode> = 48 && e.keyCode <= 57) {return true;} else {return false;}});

или на время, включая ":"

$ ('input.time'). keydown (function (e) {if (e.keyCode> = 48 && e.keyCode <= 58) {return true;} else {return false;}});

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

$ ('input.time'). keydown (function (e) {if ((e.keyCode> = 46 && e.keyCode <= 58) || e.keyCode == 8) {return true;} else {return ложный; } });

к сожалению, он не работает на iMAC


1

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

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

Только настоящий unicode char, кроме латинского, есть знак евро (20ac), добавьте все, что вам может понадобиться.

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

if (!regex.test($j(this).val())) {
  alert('your input contained not supported characters');
  $j(this).val('');
  return false;
}

1

Ограничить использование специальных символов при нажатии клавиш. Вот тестовая страница для кодов клавиш: http://www.asquare.net/javascript/tests/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 добавьте директиву

<input only-num type="text" maxlength="10" id="amount" placeholder="$XXXX.XX"
   autocomplete="off" ng-model="vm.amount" ng-change="vm.updateRequest()">

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

...

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;
}

...

1

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

$(document).ready(function (){
  $(document).on("keyup", "#Id", function () {
  $("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase());
 }); 
});

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();
                }
            }
        }


    });]

4
Ответы только на код не слишком полезны без объяснения.
Vemonus

0

Разрешить только числа в текстовом поле (ограничение алфавитов и специальных символов)

        /*code: 48-57 Numbers
          8  - Backspace,
          35 - home key, 36 - End key
          37-40: Arrow keys, 46 - Delete key*/
        function restrictAlphabets(e){
            var x=e.which||e.keycode;
            if((x>=48 && x<=57) || x==8 ||
                (x>=35 && x<=40)|| x==46)
                return true;
            else
                return false;
        }

0
/**
     * Forbids special characters and decimals
     * Allows numbers only
     * */
    const numbersOnly = (evt) => {

        let charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode === 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        let inputResult = /^[0-9]*$/.test(evt.target.value);
        if (!inputResult) {
            evt.target.value = evt.target.value.replace(/[^a-z0-9\s]/gi, '');
        }

        return true;
    }
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.