¿Cómo bloqueo los caracteres especiales para que no se escriban en un campo de entrada con jquery?
¿Cómo bloqueo los caracteres especiales para que no se escriban en un campo de entrada con jquery?
Respuestas:
Un ejemplo simple que utiliza una expresión regular que puede cambiar para permitir / no permitir lo que quiera.
$('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;
}
});
Estaba buscando una respuesta que restringiera la entrada a solo caracteres alfanuméricos, pero que aún permitiera el uso de caracteres de control (por ejemplo, retroceso, eliminar, tabulación) y copiar + pegar. Ninguna de las respuestas proporcionadas que probé cumplía con todos estos requisitos, por lo que se me ocurrió lo siguiente usando el input
evento.
$('input').on('input', function() {
$(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});
Editar:
como rinogo señaló en los comentarios, el fragmento de código anterior fuerza el cursor al final de la entrada cuando se escribe en el medio del texto de entrada. Creo que el siguiente fragmento de código resuelve este 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
o event.keycode
! ¡Ojalá pudiera +10!
Respuesta corta: evitar el evento de 'pulsación de tecla':
$("input").keypress(function(e){
var charCode = !e.charCode ? e.which : e.charCode;
if(/* Test for special character */ )
e.preventDefault();
})
Respuesta larga: use un complemento como jquery.alphanum
Hay varias cosas a considerar al elegir una solución:
Creo que esta área es lo suficientemente compleja como para justificar el uso de un complemento de terceros. Probé varios de los complementos disponibles, pero encontré algunos problemas con cada uno de ellos, así que seguí adelante y escribí jquery.alphanum . El código se ve así:
$("input").alphanum();
O para un control más detallado, agregue algunas configuraciones:
$("#username").alphanum({
allow : "€$£",
disallow : "xyz",
allowUpper : false
});
Espero eso ayude.
allow
configuración. Pero esa es la belleza de los complementos de jquery, el hecho de que puede modificarlos para adaptarlos a sus necesidades. ¡Gracias!
allow
opción y funcionó bien para mí usando este código: ¿ $('#firstName').alphanum({allow: "/"});
Alguna posibilidad de que pueda proporcionar más información? Si hay un error o un problema con los documentos, sería bueno solucionarlo. Cheers
allowOtherCharSets: false
y allowCaseless: false
. Estos interferían con la configuración establecida allow
. Desde mi punto de vista, creo que la allow
opción debería vetar todas las demás opciones (como allowOtherCharSets
o allowCaseless
). Entonces, si especifica un carácter en la allow
opción, debe permitirse independientemente de las otras opciones establecidas en el objeto de configuración. Lo mismo vale disallow
. Pero esta es solo mi opinión. :) Saludos de nuevo! :)
¡Utilice el atributo de entrada de patrón de HTML5!
<input type="text" pattern="^[a-zA-Z0-9]+$" />
Tu cuadro de texto:
<input type="text" id="name">
Su javascript:
$("#name").keypress(function(event) {
var character = String.fromCharCode(event.keyCode);
return isValid(character);
});
function isValid(str) {
return !/[~`!@#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}
Utilice expresiones regulares para permitir / no permitir nada. Además, para una versión un poco más robusta que la respuesta aceptada, se pueden permitir caracteres que no tienen un valor clave asociado (retroceso, tabulación, teclas de flecha, eliminar, etc.) pasando primero por el evento de pulsación de tecla y compruebe la clave según el código clave en lugar del 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;
}
});
Eche un vistazo al complemento 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'});
Escriba un código javascript en el evento onkeypress de textbox. según el requisito, permita y restrinja el carácter en su cuadro 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;
}
Utilizo este código modificando otros que vi. Solo es grandioso para que el usuario escriba si la tecla presionada o el texto pegado pasa la prueba de patrón (coincidencia) (este ejemplo es una entrada de texto que solo permite 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
y no simplemente e.charCode ? e.charCode : e.which
?
este es un ejemplo que evita que el usuario escriba el carácter "a"
$(function() {
$('input:text').keydown(function(e) {
if(e.keyCode==65)
return false;
});
});
referencia de códigos clave aquí:
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, '');
}
});
});
Sí, puede hacerlo 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>
y el script para su 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";
}
}
?>
Intenté agregar para / y \ pero no tuve éxito.
También puede hacerlo usando javascript y el 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)"/>
solo los números:
$ ('input.time'). keydown (function (e) {if (e.keyCode> = 48 && e.keyCode <= 57) {return true;} else {return false;}});
o por tiempo incluido ":"
$ ('input.time'). keydown (function (e) {if (e.keyCode> = 48 && e.keyCode <= 58) {return true;} else {return false;}});
también incluye eliminar y retroceder:
$ ('input.time'). keydown (function (e) {if ((e.keyCode> = 46 && e.keyCode <= 58) || e.keyCode == 8) {return true;} else {return falso;}});
Desafortunadamente, no lo hizo funcionar en un iMAC
Quería comentar sobre el comentario de Alex a la respuesta de Dale. No es posible (¿primero necesita cuánta "rep"? Eso no sucederá muy pronto .. sistema extraño). Entonces, como respuesta:
Se puede agregar retroceso agregando \ b a la definición de expresiones regulares como esta: [a-zA-Z0-9 \ b]. O simplemente permite todo el rango latino, incluidos más o menos caracteres "no exóticos" (también controlan caracteres como retroceso): ^ [\ u0000- \ u024F \ u20AC] + $
Solo el carácter unicode real fuera del latín está el símbolo del euro (20ac), agregue lo que necesite más.
Para manejar también la entrada ingresada a través de copiar y pegar, simplemente vincule también al evento "cambiar" y verifique la entrada allí también, eliminándola o eliminándola / dando un mensaje de error como "caracteres no admitidos".
if (!regex.test($j(this).val())) {
alert('your input contained not supported characters');
$j(this).val('');
return false;
}
Restrinja los caracteres especiales al presionar teclas. Aquí hay una página de prueba para códigos clave: 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();
}
});
En Angular, necesitaba un formato de moneda adecuado en mi campo de texto. Mi solución:
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();
}
En el html agregue la directiva
<input only-num type="text" maxlength="10" id="amount" placeholder="$XXXX.XX"
autocomplete="off" ng-model="vm.amount" ng-change="vm.updateRequest()">
y en el controlador angular correspondiente solo permito que haya solo 1 período, convertir texto en número y agregar redondeo de números en 'desenfoque'
...
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 reemplazar caracteres especiales, espaciar y convertir a 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 solo números en TextBox (restringir alfabetos y caracteres especiales)
/*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;
}