jquery ile giriş alanlarındaki özel karakterleri nasıl engellerim veya kısıtlarım?

Özel karakterlerin jquery ile bir giriş alanına yazılmasını nasıl engellerim?

İstediğiniz her şeye izin vermek / izin vermemek için değiştirebileceğiniz bir normal ifade kullanan basit bir örnek.

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

Girişi yalnızca alfasayısal karakterlerle sınırlayan, ancak yine de kontrol karakterlerinin (örneğin, geri al, sil, sekme) ve kopyala + yapıştır kullanımına izin veren bir yanıt arıyordum. Denediğim yanıtların hiçbiri bu gereksinimleri karşılamadı, bu yüzden inputolayı kullanarak aşağıdakileri buldum .

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

Düzenleme:
As rinogo Açıklamalarda belirttiği Yukarıdaki kod parçası kuvvetleri girdi sonuna imleç zaman giriş metninin ortasında yazarak. Aşağıdaki kod parçasının bu sorunu çözdüğüne inanıyorum.

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

Kısa cevap: 'tuşa basma' olayını önleyin:

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

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

Uzun cevap: jquery.alphanum gibi bir eklenti kullanın

Bir çözüm seçerken dikkate alınması gereken birkaç nokta vardır:

• Yapıştırılan metin
• Backspace veya F5 gibi kontrol karakterleri yukarıdaki kodla engellenebilir.
• é, í, ä vb.
• Arapça veya Çince ...
• Çapraz Tarayıcı uyumluluğu

Bence bu alan bir 3. parti eklenti kullanmayı garanti edecek kadar karmaşık. Mevcut eklentilerin birkaçını denedim, ancak her birinde bazı sorunlar buldum, bu yüzden devam edip jquery.alphanum yazdım . Kod şuna benzer:

$("input").alphanum();

Veya daha hassas denetim için bazı ayarlar ekleyin:

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

Umarım yardımcı olur.

HTML5'in desen girdi özelliğini kullanın!

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

Metin kutunuz:

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

Javascript'iniz:

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

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

Herhangi bir şeye izin vermek / izin vermemek için normal ifadeyi kullanın. Ayrıca, kabul edilen yanıttan biraz daha sağlam bir sürüm için, kendileriyle ilişkilendirilmiş bir anahtar değeri olmayan karakterlere izin vermek (geri alma, sekme, ok tuşları, silme, vb.) Önce tuşa basma olayından geçerek yapılabilir ve anahtarı değer yerine anahtar koduna göre kontrol edin.

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

JQuery alfanümerik eklentisine bir göz atın. 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'});

Metin kutusunun onkeypress olayına bazı javascript kodu yazın. gereksinime göre metin kutunuzdaki karaktere izin verin ve kısıtlayın

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

Bu kodu gördüğüm diğerlerini değiştirmek için kullanıyorum. Yalnızca tuşa basılan veya yapıştırılan metin kalıp testini geçerse (eşleşme) kullanıcıya yazar (bu örnek yalnızca 8 haneye izin veren bir metin girişidir)

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

bu, kullanıcının "a" karakterini yazmasını engelleyen bir örnektir

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

});
});

anahtar kodları referansı burada:
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, '');
          }
       });
    });

Evet, jQuery'yi şu şekilde kullanarak yapabilirsiniz:

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

ve user_availability.php dosyanız için komut dosyası şöyle olacaktır:

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

/ Ve \ için eklemeye çalıştım ama başarılı olamadım.

Bunu javascript kullanarak da yapabilirsiniz ve kod:

<!-- 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)"/>

sadece sayılar:

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

veya ":" dahil olmak üzere zaman için

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

ayrıca silme ve geri alma dahil:

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

ne yazık ki bir iMAC üzerinde çalışmasını sağlayamama

Dale'in cevabına Alex'in yorumu hakkında yorum yapmak istedi. Mümkün değil (ilk önce ne kadar "rep" ye ihtiyacım var? Bu çok yakında olmayacak .. garip sistem.) Yani cevap olarak:

Geri tuşu, şu şekilde normal ifade tanımına \ b eklenerek eklenebilir: [a-zA-Z0-9 \ b]. Ya da az çok "egzotik olmayan" karakterler dahil olmak üzere tüm Latin aralığına izin verebilirsiniz (ayrıca geri tuşu gibi karakterleri kontrol edin): ^ [\ u0000- \ u024F \ u20AC] + $

Sadece latin dışındaki gerçek unicode karakterinde euro işareti (20ac) vardır, ihtiyacınız olabilecek her şeyi ekleyin.

Kopyala ve yapıştır yoluyla girilen girdileri de işlemek için, "değiştir" olayına bağlanın ve oradaki girişi de kontrol edin - onu silin veya şeritleyin / "desteklenmeyen karakterler" gibi bir hata mesajı verin ..

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

Tuşa basıldığında özel karakterleri kısıtlayın. Anahtar kodlar için bir test sayfası: 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();
   }
});

Angular'da, metin alanımda uygun bir para birimi biçimine ihtiyacım vardı. Çözümüm:

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

Html'de yönergeyi ekleyin

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

ve ilgili açısal denetleyicide yalnızca 1 dönemin olmasına izin veriyorum, metni sayıya dönüştürüyorum ve 'bulanıklaştırma' üzerine sayı yuvarlaması ekliyorum

...

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

...

Özel karakterleri değiştirmek, boşluk bırakmak ve küçük harfe dönüştürmek için

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


    });]

Metin Kutusunda yalnızca sayılara izin ver (Alfabeleri ve Özel Karakterleri Kısıtla)

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