Como faço para bloquear caracteres especiais de serem digitados em um campo de entrada com jquery?
Como faço para bloquear caracteres especiais de serem digitados em um campo de entrada com jquery?
Respostas:
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;
}
});
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 input
evento.
$('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);
});
event.which
ou event.keycode
! Gostaria de poder +10!
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:
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.
allow
configuração. Mas essa é a beleza dos plug-ins jquery, o fato de que você pode modificá-los para atender às suas necessidades. Obrigado!
allow
opçã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
allowOtherCharSets: false
e allowCaseless: false
. Isso interferiu nas configurações definidas em allow
. Do meu ponto de vista, acho que a allow
opção deve vetar todas as outras opções (como allowOtherCharSets
ou allowCaseless
). Portanto, se você especificar um caractere na allow
opçã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! :)
allow
e disallow
ter uma prioridade mais alta. Está registrado na edição # 7 . Espero que ajude
Use o atributo de entrada de padrão do HTML5!
<input type="text" pattern="^[a-zA-Z0-9]+$" />
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);
}
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;
}
});
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'});
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;
}
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
}
})
!e.charCode ? e.which : e.charCode
e não simplesmente e.charCode ? e.charCode : e.which
?
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
$(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, '');
}
});
});
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)"/>
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
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;
}
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;
}
...
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());
});
});
[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();
}
}
}
});]
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;
}
/**
* 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;
}