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

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

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

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

Короткий ответ: запретить событие «keypress»:

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

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

При выборе решения есть несколько вещей:

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

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

 $("input").alphanum(); 

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

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

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

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

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

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

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

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

  

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

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

 $('#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.,/ [email protected]()]+$"); var key = event.key; if (!regex.test(key)) { event.preventDefault(); return false; } break; } }); 

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

  

Ваш javascript:

 $("#name").keypress(function(event) { var character = String.fromCharCode(event.keyCode); return isValid(character); }); function isValid(str) { return !/[~`[email protected]#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str); } 

Напишите код 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; } 

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

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

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

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

Да, вы можете использовать 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 и код:

     User id :  

просто цифры:

$ (‘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

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

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

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

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

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

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

  

и в соответствующем угловом controllerе я допускаю только 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; } ... 

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

 $(document).ready(function (){ $(document).on("keyup", "#Id", function () { $("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase()); }); }); 
 [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(); } } } });] 
Interesting Posts
Давайте будем гением компьютера.