Como faço para bloquear ou restringir caracteres especiais de campos de input com jquery?

Como faço para impedir que caracteres especiais sejam typescripts em um campo de input com jquery?

   

Um exemplo simples usando uma expressão regular que você pode alterar para permitir / não permitir o que quiser.

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

Resposta curta: evitar o evento ‘keypress’:

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

Resposta longa: use um plugin como jquery.alphanum

Há várias coisas a serem consideradas ao escolher uma solução:

  • Texto colado
  • Caracteres de controle como backspace ou F5 podem ser evitados pelo código acima.
  • é, í, ä etc
  • Árabe ou chinês …
  • Compatibilidade entre navegadores

Eu acho que esta área é complexa o suficiente para garantir usando um plugin de terceiros. Eu tentei vários dos plugins disponíveis, mas encontrei alguns problemas com cada um deles, então eu fui em frente e escrevi jquery.alphanum . O código é assim:

 $("input").alphanum(); 

Ou para um controle mais refinado, adicione algumas configurações:

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

Espero que ajude.

Eu estava procurando por uma resposta que restringisse a input apenas a caracteres alfanuméricos, mas ainda permitisse o uso de caracteres de controle (por exemplo, backspace, delete, tab) e copiar + colar. Nenhuma das respostas fornecidas que eu tentei satisfazer todos esses requisitos, então eu vim com o seguinte usando o evento de input .

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

Editar:
Como rinogo apontou nos comentários, o trecho de código acima força o cursor para o final da input ao digitar no meio do texto de input. Eu acredito que o trecho de código abaixo resolve esse problema.

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

Use o atributo de input de padrão do HTML5!

  

Dê uma olhada no plugin alfanumérico da 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'}); 

Use regex para permitir / não permitir nada. Além disso, para uma versão um pouco mais robusta do que a resposta aceita, permitir que caracteres que não tenham um valor de chave associado a eles (retrocesso, tabulação, teclas de seta, exclusão, etc.) possam ser feitos primeiro passando pelo evento keypress e verifique a chave com base no código de access em vez do valor.

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

Sua checkbox de texto:

  

Seu javascript:

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

Escreva algum código javascript no evento onkeypress da checkbox de texto. como por requisito permitir e restringir personagem em sua checkbox de texto

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

Eu uso esse código modificando os outros que vi. Somente grande para o usuário escrever se a tecla pressionada ou colada passar o teste padrão (match) (este exemplo é uma input de texto que permite apenas 8 dígitos)

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

Este é um exemplo que impede o usuário de digitar o caractere “a”

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

códigos chave refrence aqui:
http://www.expandinghead.net/keycode.html

Sim, você pode fazer usando jQuery como:

   

e o script para o seu user_availability.php será:

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

Eu tentei adicionar para / e \, mas não conseguiu.


Você também pode fazer isso usando javascript e código será:

     User id :  

apenas os números:

$ (‘input.time’). keydown (function (e) {if (e.keyCode> = 48 && e.keyCode < = 57) {retorno verdadeiro;} senão {return false;}});

ou por tempo, incluindo “:”

$ (‘input.time’). keydown (function (e) {if (e.keyCode> = 48 && e.keyCode < = 58) {retorno verdadeiro;} senão {return false;}});

incluindo também delete e backspace:

$ (‘input.time’). keydown (function (e) {if ((e.keyCode> = 46 && e.keyCode < = 58) || e.keyCode == 8) {retorno verdadeiro;} mais {retorno false;}});

infelizmente não conseguir que ele funcione em um iMAC

Queria comentar o comentário de Alex à resposta de Dale. Não é possível (primeiro preciso de quanto “rep”? Isso não vai acontecer muito em breve .. sistema estranho.) Então, como uma resposta:

Backspace pode ser adicionado adicionando \ b à definição de regex como esta: [a-zA-Z0-9 \ b]. Ou você simplesmente permite toda a variação em latim, incluindo mais ou menos qualquer caractere “não exótico” (também controla caracteres como backspace): ^ [\ u0000- \ u024F \ u20AC] + $

Apenas o caracter unicode real fora do latim é o sinal do euro (20ac), adicione o que você precisar.

Para também manipular input inserida através de copiar e colar, simplesmente também vincule ao evento “change” e verifique a input lá também – excluindo-a ou distribuindo-a / fornecendo uma mensagem de erro como “caracteres não suportados”.

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

Restringir caracteres especiais no pressionamento de tecla. Aqui está uma página de teste para códigos-chave: 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(); } }); 

Em Angular, eu precisava de um formato de moeda adequado no meu campo de texto. Minha solução:

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

No html adicione a diretiva

  

e no controlador angular correspondente, eu só permito que haja apenas 1 período, converta o texto em número e adicione arredondamento de número em “borrão”

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

Para replace caracteres especiais, espaço e converter para minúsculas

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