jak zablokować lub ograniczyć znaki specjalne z pól wejściowych za pomocą jQuery?

Odpowiedzi:

133

Prosty przykład z użyciem wyrażenia regularnego, które możesz zmienić, aby zezwolić / zabronić wszystkiego, co chcesz.

$('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;
    }
});
Dołek
źródło
49
To nie działa w przypadku wklejonego tekstu i może również uniemożliwić użytkownikowi naciskanie klawiszy nietekstowych, takich jak backspace, klawisze strzałek itp.
bendytree
6
To nie pozwoli na backspace w Firefoksie
Alex,
Nie działa dla hiszpańskich słów, jak: Avion (samolotu), ARBOL (drzewa), itd.
nikoskip
Nie działa w najnowszej przeglądarce Firefox, ale działa dobrze w przeglądarce Chrome
Phoenix
To rozwiązanie działa dla mnie na elemencie Bootstrap-TagsInput. Aby rozwiązać problem wklejania, możesz po prostu dodać „wklej” do listy parametrów zdarzenia, w ten sposób: $ ('input'). On ('keypress, paste' ', () => ........
Jim22150
60

Szukałem odpowiedzi, która ograniczyłaby wprowadzanie tylko do znaków alfanumerycznych, ale nadal pozwalała na użycie znaków sterujących (np. Backspace, usuń, tabulator) oraz kopiuj + wklej. Żadna z udzielonych odpowiedzi, które wypróbowałem, nie spełniała wszystkich tych wymagań, więc wymyśliłem następujące, używając inputzdarzenia.

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

Edycja:
Jak wskazał rinogo w komentarzach, powyższy fragment kodu wymusza przesunięcie kursora do końca wprowadzania podczas wpisywania w środku tekstu wejściowego. Uważam, że poniższy fragment kodu rozwiązuje ten problem.

$('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);
});
rexmac
źródło
1
+1 Przewijałem odpowiedzi, szukając odpowiedzi takiej jak ta, lub chciałbym przesłać własną odpowiedź. Ta odpowiedź natychmiast odfiltrowuje niedozwolone znaki! Wspaniały!
emilhem
2
+1 Działa dla wklejonego tekstu, nie koliduje z klawiszami cofania i usuwania FF i nie polega na event.whichani event.keycode! Chciałbym móc +10!
rinogo
3
... ALE w Chrome i IE, gdy wpisujesz nowe znaki lub używasz klawisza Backspace i usuwasz klawisze w środku wprowadzanego tekstu , kursor jest przenoszony na koniec tekstu ...: / Czy istnieje łatwe obejście to? Tak bardzo chciałem, żeby to zadziałało!
rinogo
Tak blisko ... ten kod zachowuje się bardzo dziwnie w Chrome Mobile. Kursor przeskakuje po pierwszej wpisanej literze i po cofnięciu.
Juliano
2
@Juliano Ciekawe, wygląda na to, że selectionStart zawsze zwraca 0 w Chrome Mobile, niezależnie od tego, gdzie aktualnie znajduje się kursor / daszek. Nie jestem pewien (jeszcze), czy jest to błąd lub zamierzone zachowanie. Obecnie badam ten problem i zaktualizuję tutaj swoją odpowiedź lub komentarz, gdy dowiem się więcej.
rexmac
48

Krótka odpowiedź: zapobiegaj zdarzeniu „naciśnięcie klawisza”:

$("input").keypress(function(e){
    var charCode = !e.charCode ? e.which : e.charCode;

    if(/* Test for special character */ )
        e.preventDefault();
})

Długa odpowiedź: użyj wtyczki takiej jak jquery.alphanum

Wybierając rozwiązanie, należy wziąć pod uwagę kilka kwestii:

  • Wklejony tekst
  • Powyższy kod może blokować znaki sterujące, takie jak backspace lub F5.
  • é, í, ä itd
  • Arabski czy chiński ...
  • Zgodność z różnymi przeglądarkami

Myślę, że ten obszar jest na tyle złożony, że wymaga użycia wtyczki innej firmy. Wypróbowałem kilka dostępnych wtyczek, ale z każdą z nich napotkałem pewne problemy, więc napisałem jquery.alphanum . Kod wygląda następująco:

$("input").alphanum();

Aby uzyskać bardziej precyzyjną kontrolę, dodaj kilka ustawień:

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

Mam nadzieję, że to pomoże.

KevSheedy
źródło
1
Świetna rzecz, świetna. Po prostu musiałem dodać opcję włączania / wyłączania znaku ukośnika („/”), ponieważ nie działała podczas umieszczania go w allowustawieniu. Ale to jest piękno wtyczek jquery, fakt, że możesz je modyfikować do swoich potrzeb. Dzięki!
Adrian Marinica
Dzięki Adrian. Przy okazji, właśnie próbowałem włączyć ukośnik za pomocą allowopcji i działało dobrze, używając tego kodu: Czy jest $('#firstName').alphanum({allow: "/"});szansa, że ​​mógłbyś podać więcej informacji? Jeśli wystąpi błąd lub problem z dokumentacją, byłoby miło go naprawić. Pozdrawiam
KevSheedy
Cześć KevSheedy, dzięki za poświęcenie czasu na przetestowanie tego. Przepraszam, że nie wyjaśniłem tego wystarczająco jasno. Problem polegał na tym, że miałem też allowOtherCharSets: falsei allowCaseless: false. Te zakłócały ustawienia wprowadzone w allow. Z mojego punktu widzenia uważam, że allowopcja ta powinna wykluczać wszystkie inne opcje (takie jak allowOtherCharSetslub allowCaseless). Jeśli więc określisz znak w allowopcji, powinien on być dozwolony niezależnie od innych opcji ustawionych w obiekcie konfiguracyjnym. To samo dotyczy disallow. Ale to tylko moja opinia. :) Zdrówko! :)
Adrian Marinica
Słuszna uwaga, Adrian. Poszedłem do przodu i opublikował poprawkę w v1.0.6, aby allowi disallowmają wyższy priorytet. Zalogowano się w numerze 7 . Mam nadzieję, że to pomoże
KevSheedy
6
"Więc poszedłem naprzód i napisałem jquery.alphanum" Niesamowite!
Felix
14

Użyj atrybutu wejściowego wzorca HTML5!

<input type="text" pattern="^[a-zA-Z0-9]+$" />
bądź sobą
źródło
11
Chociaż to rozwiązanie zapobiega wprowadzaniu niepożądanych znaków, nie zapobiega wprowadzaniu niepożądanych znaków do pola wejściowego.
rexmac
1
Istnieje również ryzyko, że użytkownik nie korzysta z przeglądarki HTML5.
Kapitan Kenpachi,
Z doświadczenia w zakresie UX wynika, że ​​wielu ludzi nienawidzi bardziej niż ograniczeń w tym, co potrafią wpisać, jest to, że mówi się, że później zrobiłeś to źle. - Wymuszanie wprowadzania danych ma na celu zmniejszenie liczby komunikatów o błędach i nieważnych powiadomień.
Julix,
1
@Julix To sprawa indywidualna. Istnieją pola, które mogą być tylko numeryczne (cena lub dowolna kwota w walucie, itp.), W których nie ma sensu słuchać wprowadzania znaków alfabetycznych. Ale tak, mój nie był tak naprawdę rozwiązaniem problemu OP, ale przyjemnym i łatwym sposobem na pomoc w rozwiązaniu problemu z UX.
keepitreal
13

Twoje pole tekstowe:

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

Twój javascript:

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

function isValid(str) {
    return !/[~`!@#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}
kupiec
źródło
@Bhargav Rao, usunąłem drugi zduplikowany post i ponownie opublikowałem ten, ponieważ ten był bardziej odpowiedni, dzięki za wskazanie tego
chandler
11

Użyj wyrażenia regularnego, aby zezwolić / zabronić czegokolwiek. Ponadto, w przypadku nieco bardziej niezawodnej wersji niż zaakceptowana odpowiedź, zezwolenie na znaki, które nie mają skojarzonej z nimi wartości kluczowej (backspace, tab, klawisze strzałek, delete itp.) Można wykonać, przechodząc najpierw przez zdarzenie keypress i sprawdź klucz na podstawie kodu klucza zamiast wartości.

$('#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;
        }
});
James Mart
źródło
11

Spójrz na wtyczkę alfanumeryczną 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'});
RSolberg
źródło
Czy jest jeden na listy? Zwykle używam nan tylko do numerów (takich jak kod pocztowy lub telefon)
3

Napisz kod javascript na zdarzenie onkeypress pola tekstowego. zgodnie z wymaganiami zezwalaj i ograniczaj znaki w polu tekstowym

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

Pratik 1020
źródło
1
To działa, jeśli piszę ręcznie. Ale jestem w stanie wkleić skopiowane znaki specjalne.
Sunil Garg
3

Używam tego kodu modyfikując inne, które widziałem. Tylko wielkie dla użytkownika piszesz, jeśli naciśnięty klawisz lub wklejony tekst przejdzie test wzoru (dopasowanie) (w tym przykładzie jest wprowadzanie tekstu, które dopuszcza tylko 8 cyfr)

$("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
    }
})
Pablo Padron
źródło
dlaczego !e.charCode ? e.which : e.charCodei nie po prostu e.charCode ? e.charCode : e.which?
Massimiliano Kraus
jakie zmiany należy wprowadzić, aby akceptować liczby dziesiętne?
ubm
2

to jest przykład, który uniemożliwia użytkownikowi wpisanie znaku „a”

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

});
});

kluczowe kody odniesienia tutaj:
http://www.expandinghead.net/keycode.html


źródło
Myślę, że wszystkie kody, których nie chcesz dopuścić, mogą być przytłaczające.
RSolberg
Jeśli chcesz, aby ktoś mógł wprowadzać tylko cyfry od 1 do 5, w końcu zarządzasz 5 kodami klawiszy w swoim kodzie.
RSolberg
2
Właściwie to nie jest zły plan, jeśli AlphaNumeric nie jest wtyczką dla ciebie. Zrobiłem to za pomocą instrukcji przełącznika / przypadku. Ten przykład nie zezwala na znaki, które nie są dozwolone w nazwach katalogów: $ ('input [type =' text '], textarea'). Keydown (function (ev) {switch (ev.keyCode) {case 47: case 92: case 63: sprawa 37: sprawa 42: sprawa 59: sprawa 124: sprawa 34: sprawa 60: sprawa 62: zwrot fałsz;};});
M Miller
@ user434917, Twój kod nie działa, gdy testuję go w przeglądarce Chrome na urządzenia mobilne z systemem Android. czy masz na to jakieś rozwiązanie ..?
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, '');
          }
       });
    });
Ranjith Rana
źródło
1

Tak, możesz to zrobić używając jQuery jako:

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

a skrypt dla twojego user_availability.php będzie:

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

Próbowałem dodać dla / i \, ale nie udało się.


Możesz to również zrobić za pomocą javascript, a kod będzie:

<!-- 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)"/>
PHP Ferrari
źródło
2
Koleś, dołączyłeś całą masę nadmiarowego kodu, który prawdopodobnie nie jest pomocny. Czy możesz ograniczyć to do absolutnego minimum? A on pytał o jQuery, nie jestem pewien, czy PHP jest odpowiednie.
Simon East,
@PHP Ferrari: Używam kodu javascript, Twój kod działa poprawnie, Jak mogę wyświetlić wyskakujący komunikat ostrzegawczy, jeśli klient wprowadzi znak specjalny. Komunikat typu „Znaki specjalne niedozwolone”.
Gem
1

same liczby:

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

lub na czas zawierający „:”

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

w tym także delete i backspace:

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

niestety nie działa na iMACu

Jonathan Joosten
źródło
1

Chciał skomentować komentarz Alexa do odpowiedzi Dale'a. Niemożliwe (najpierw potrzebujesz, ile „powtórzeń”? To nie nastąpi bardzo szybko… dziwny system). Więc jako odpowiedź:

Backspace można dodać, dodając \ b do definicji wyrażenia regularnego w następujący sposób: [a-zA-Z0-9 \ b]. Lub po prostu zezwalasz na cały zakres alfabetu łacińskiego, w tym mniej więcej wszystkie znaki „nieegzotyczne” (także kontroluj znaki, takie jak backspace): ^ [\ u0000- \ u024F \ u20AC] + $

Tylko prawdziwy znak Unicode poza łaciną jest znak euro (20ac), dodaj wszystko, czego potrzebujesz.

Aby obsłużyć również dane wejściowe wprowadzone za pomocą kopiowania i wklejania, po prostu połącz się ze zdarzeniem „zmień” i sprawdź tam również dane wejściowe - usuwając je lub usuwając / wyświetlając komunikat o błędzie typu „nieobsługiwane znaki”.

if (!regex.test($j(this).val())) {
  alert('your input contained not supported characters');
  $j(this).val('');
  return false;
}
hyphan
źródło
1

Ogranicz znaki specjalne po naciśnięciu klawisza. Oto strona testowa dla kluczowych kodów: 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();
   }
});

W Angular potrzebowałem odpowiedniego formatu waluty w moim polu tekstowym. Moje rozwiązanie:

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

W html dodaj dyrektywę

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

iw odpowiednim kontrolerze kątowym pozwalam tylko na 1 okres, konwertuj tekst na liczbę i dodaj zaokrąglanie liczb do `` rozmycia ''

...

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

...
Ivor Scott
źródło
1

Aby zamienić znaki specjalne, spacje i zamień na małe litery

$(document).ready(function (){
  $(document).on("keyup", "#Id", function () {
  $("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase());
 }); 
});
GirishBabuC
źródło
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();
                }
            }
        }


    });]
Govind Pant
źródło
4
Odpowiedzi zawierające tylko kod nie są zbyt przydatne bez wyjaśnienia.
Vemonus,
0

Zezwalaj tylko na liczby w polu tekstowym (ogranicz alfabety i znaki specjalne)

        /*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;
        }
user3354817
źródło
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;
    }
Deweloperzy RedBonzai
źródło