como faço para bloquear ou restringir caracteres especiais de campos de entrada com jquery?


Respostas:


133

Um exemplo simples usando uma expressão regular que você pode alterar para permitir / proibir 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;
    }
});

49
Isso não funciona para texto colado e também pode impedir que o usuário pressione teclas que não sejam de texto, como backspace, teclas de seta, etc.
bendytree 02 de

6
Isso não permitirá backspace no firefox
Alex

Não funciona com palavras em espanhol como: avión (avião), árbol (árvore), etc.
nikoskip

Não funciona no navegador Firefox mais recente, mas funciona bem no Chrome
Phoenix

Esta solução funciona para mim em um elemento Bootstrap-TagsInput. Para resolver o problema de colar, você pode simplesmente adicionar "colar" à lista de parâmetros do evento da seguinte forma: $ ('input'). On ('keypress, paste' ', () => ........
Jim22150

60

Eu estava procurando uma resposta que restringisse a entrada a apenas caracteres alfanuméricos, mas ainda permitisse o uso de caracteres de controle (por exemplo, backspace, deletar, tabulação) e copiar + colar. Nenhuma das respostas fornecidas que tentei atendeu a todos esses requisitos, então, sugeri o seguinte usando o inputevento.

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

Editar:
Como o rinogo apontou nos comentários, o trecho de código acima força o cursor para o final da entrada ao digitar no meio do texto de entrada. 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);
});

1
+1 Eu estava rolando as respostas em busca de uma resposta como esta ou enviaria minha própria resposta. Esta resposta filtra quaisquer caracteres não permitidos instantaneamente! Ótimo!
emilhem

2
+1 Funciona para texto colado, não interfere no backspace do FF e nas teclas de exclusão e não depende de event.whichou event.keycode! Gostaria de poder +10!
rinogo

3
... MAS no Chrome e no IE, quando você digita novos caracteres ou usa o backspace e exclui as teclas no meio do texto de entrada , o cursor é movido para o final do texto ...: / Existe uma solução fácil para isto? Eu queria tanto que isso funcionasse!
rinogo

Tão perto ... este código tem um comportamento muito estranho no Chrome Mobile. O cursor pula na primeira letra digitada e também no backspace.
Juliano

2
@Juliano Interessante, parece que selectionStart sempre retorna 0 no Chrome Mobile, independentemente de onde o cursor / acento circunflexo está posicionado no momento. Não tenho certeza (ainda) se isso é um bug ou comportamento pretendido. No momento, estou pesquisando o problema e atualizarei minha resposta ou comentário aqui quando souber mais.
rexmac

48

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

Existem várias coisas a considerar 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

Acho que esta área é complexa o suficiente para justificar o uso de um plugin de terceiros. Tentei vários dos plug-ins disponíveis, mas encontrei alguns problemas com cada um deles, então fui em frente e escrevi jquery.alphanum . O código é parecido com este:

$("input").alphanum();

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

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

Espero que ajude.


1
Coisas incríveis cara, incrível. Eu só tive que adicionar uma opção para ativar / desativar o caractere de barra ('/'), pois não funcionou ao colocá-lo na allowconfiguração. Mas essa é a beleza dos plug-ins jquery, o fato de que você pode modificá-los para atender às suas necessidades. Obrigado!
Adrian Marinica

Obrigado Adrian. A propósito, eu apenas tentei habilitar a barra usando a allowopção e funcionou bem para mim usando este código: $('#firstName').alphanum({allow: "/"});Alguma chance de você fornecer mais informações? Se houver um bug ou problema com os documentos, seria bom consertá-lo. Cheers
KevSheedy

Oi KevSheedy, obrigado por dedicar seu tempo para testar isso. Desculpe, eu não deixei isso claro o suficiente. O problema era que eu também tinha allowOtherCharSets: falsee allowCaseless: false. Isso interferiu nas configurações definidas em allow. Do meu ponto de vista, acho que a allowopção deve vetar todas as outras opções (como allowOtherCharSetsou allowCaseless). Portanto, se você especificar um caractere na allowopção, ele deve ser permitido independentemente das outras opções definidas no objeto de configuração. O mesmo vale para disallow. Mas esta é apenas a minha opinião. :) Saúde de novo! :)
Adrian Marinica

Bom ponto Adrian. Eu fui em frente e publiquei uma correção na V1.0.6 para fazer allowe disallowter uma prioridade mais alta. Está registrado na edição # 7 . Espero que ajude
KevSheedy

6
"então eu fui em frente e escrevi jquery.alphanum" Incrível!
Felix

14

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

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

11
Embora esta solução evite que caracteres indesejados sejam enviados, ela não impede que caracteres indesejados sejam inseridos no campo de entrada.
rexmac

1
Também existe o risco de o usuário não estar usando um navegador HTML5.
Capitão Kenpachi

Pela experiência de UX, uma coisa que muitas pessoas odeiam mais do que serem restritas no que podem digitar é ouvir que você errou depois. - Forçar a entrada é para reduzir mensagens de erro e notificações inválidas.
Julix

1
@Julix É caso a caso. Existem alguns campos que podem ser apenas numéricos (preço ou qualquer valor monetário, etc.) onde não faz sentido ouvir a entrada de caracteres alfabéticos. Mas sim, o meu não era realmente uma solução para o problema do OP, mas uma maneira fácil e agradável de ajudar com o problema de UX.
keepitreal

13

Sua caixa de texto:

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

Seu javascript:

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

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

@Bhargav Rao, eu apaguei a outra postagem duplicada e repostei esta porque esta era mais apropriada, obrigado por apontar isso
chandler

11

Use regex para permitir / proibir qualquer coisa. Além disso, para uma versão um pouco mais robusta do que a resposta aceita, permitir que os caracteres que não tenham um valor-chave associado a eles (backspace, tab, teclas de seta, excluir, etc.) podem ser feitos passando primeiro pelo evento de pressionamento de tecla e verifique a chave com base no código-chave em vez de no 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;
        }
});

11

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

Existe um para cartas? Normalmente, eu uso nan apenas para números (como um código postal ou telefone)

3

Escreva algum código javascript no evento onkeypress da caixa de texto. conforme o requisito, permita e restrinja o caractere em sua caixa 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;
}


1
Isso está funcionando se eu digitar manualmente. Mas consigo colar caracteres especiais copiados.
Sunil Garg

3

Eu uso este código modificando outros que vi. Somente grand para o usuário escrever se a tecla pressionada ou o texto colado passar no teste de padrão (correspondência) (este exemplo é uma entrada 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
    }
})

por que !e.charCode ? e.which : e.charCodee não simplesmente e.charCode ? e.charCode : e.which?
Massimiliano Kraus

quais mudanças precisam ser feitas para aceitação de números decimais?
ubm

2

este é um exemplo que evita que o usuário digite o caractere "a"

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

});
});

referência dos códigos-chave aqui:
http://www.expandinghead.net/keycode.html


Eu acho que todos os códigos-chave que você não deseja permitir podem ser opressores de tentar e gerenciar.
RSolberg

Se você quiser restringir alguém para apenas inserir os números de 1 a 5, acabará gerenciando 5 códigos dentro do seu código.
RSolberg

2
Na verdade, não é um plano ruim se AlphaNumeric não for o plugin para você. Eu fiz funcionar com uma instrução switch / case. Este exemplo não permite caracteres que não são permitidos em nomes de diretório: $ ('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, seu código não está funcionando quando o testo com o navegador Chrome para celular Android. você tem alguma solução para isso ..?
Pranesh Janarthanan

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

Sim, você pode fazer usando jQuery como:

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

e o script para 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";
    }
}
?>

Tentei adicionar para / e \ mas não consegui.


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

<!-- 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
Cara, você incluiu um monte de código em excesso que provavelmente não ajuda. Você pode reduzi-lo ao mínimo? E ele estava perguntando sobre jQuery, não tenho certeza se o PHP é relevante.
Simon East

@PHP Ferrari: Estou usando código javascript, Seu código está funcionando bem, como posso exibir uma mensagem pop-up de alerta se o cliente inserir o caractere especial. A mensagem como "Caracteres especiais não permitidos".
Gem de

1

apenas os números:

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

ou por tempo incluindo ":"

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

também incluindo delete e backspace:

$ ('input.time'). keydown (function (e) {if ((e.keyCode> = 46 && e.keyCode <= 58) || e.keyCode == 8) {return true;} else {return falso;}});

infelizmente não fazê-lo funcionar em um iMAC


1

Queria comentar sobre o comentário de Alex à resposta de Dale. Não é possível (primeiro precisa 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 este: [a-zA-Z0-9 \ b]. Ou você simplesmente permite todo o intervalo latino, incluindo mais ou menos qualquer coisa "não exótica" (também controla caracteres como backspace): ^ [\ u0000- \ u024F \ u20AC] + $

Apenas o caracter Unicode real fora do latim é o símbolo do euro (20ac), adicione o que for necessário.

Para também lidar com a entrada inserida por meio de copiar e colar, simplesmente vincule ao evento "alterar" e verifique a entrada lá também - excluindo-a ou removendo-a / exibindo 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;
}

1

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

No 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

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

e no controlador angular correspondente, só permito que haja apenas 1 ponto, converto o texto em número e acrescento o arredondamento do número em 'desfocar'

...

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

Para substituir caracteres especiais, coloque espaço e converta 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());
 }); 
});

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
Respostas somente de código não são muito úteis sem uma explicação.
Vemonus de

0

Permitir apenas números em TextBox (Restringir alfabetos e caracteres especiais)

        /*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;
    }
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.