javascript防止textarea中的特殊字符

Question

i need to restrict the usage of the following special characters <>{} in a textarea. I am making use of this Alphanumeric Plugin for jQuery ( https://github.com/KevinSheedy/jquery.alphanum ).

My script is as follows:

$(document).on('keyup', '#ta_0', function(e){
    blacklisted_characters = $('#ta_0').alphanum({ disallow : '<>{}' }); // Specify characters to disallow
    if (blacklisted_characters) {
        if (!!$.prototype.fancybox)
            $.fancybox.open([
                {
                    type: 'inline',
                    autoScale: true,
                    minHeight: 30,
                    content: '<p class="fancybox-error">' + 'Désolé, l\'utilisation de ce caractère n\'est pas autorisée.' + '</p>'
                }],
                {
                    padding: 0
                });
        else
            alert('Désolé, l\'utilisation de ce caractère n\'est pas autorisée.');
    };

});

The pop up should appear in case those special characters has been written in the textarea. But i think there is an error in my code, because its preventing me from adding texts in the textarea and poping up the error message everytime.

The plugin works with this only:

$('#ta_0').alphanum({ 
    disallow           : '<>{}' 
});

It is the if condition that i am doing wrong. The id of my textarea is $ta_0 .I just need to make an if condition so identify if the following characters are written in the textarea <>{} . If those characters are written in the textarea, it should fire up the error popup.

Any help will be very appreciated.

Thank you

Answer 1

The function: $('#ta_0').alphanum({ disallow : '<>{}' }); does not return the input character as a value, it returns an array of inputs that have been selected using the jQuery selector, in this case #ta_0 . Since those inputs exist on your page, it will always return true, which causes the popup to continue to run.

You'll have to restructure your code in a few ways.

1. Move $('#ta_0').alphanum({ disallow : '<>{}' }); outside the keyup function
2. Find the keycodes for your blacklisted inputs (<>{})
3. Check the event (in this case e ) inside your keyup function against those keycodes to decide whether to display the fancybox.

To clarify step 3: It looks like it would be difficult to do this with keyup , because the characters all require the Shift key as a modifier. But using keypress , you get a unique code for Shift+key .

$(document).on("keypress", "#ta_0", function(event) {
  blacklisted_characters = [
    123, // {
    125, // }
    60, // <
    62 // >
  ];
  if (blacklisted_characters.indexOf(event.which) >= 0) {
    alert("Désolé, l\'utilisation de ce caractère n\'est pas autorisée.");
  }
});

I tried to make a fiddle combining this with the alphanum plugin, but there seemed to be a problem loading github user content. But here you can see an example of the code above

Answer 2

Ok it's not elegant, and you have to tweek it a little to make it better, but it does what I believe you need:

$("#myText").on("keyup",function(event){
    //console.log(event.which);
    if(event.which == 219 || event.which == 221 || event.which == 188 || event.which == 190)
        {
            $("#myText").val($("#myText").val().replace(/<|>|{|}/gi,""));
        }
});

Hope it helps.