How do I prevent the user from entering '>' and '<' characters with javascript?

Question

I want to prevent user from entering '>' and '<' character. How should i do this? I tried to implement this by ( via javascript) detecting their keycodes but since '>' and '.' have the same keycode, it also prevented '.' from being entered. The same happens for the ',' and '<' characters. How should i do this?

Below is what i have tried.

    $('#Notes').bind('keydown', function() {
        if (window.event) {

            if ((window.event.keyCode == 190) || (window.event.keyCode == 188)) {
                return false;
            }
            else {
                return true;
            }


        }
    });

Answer 1

If this is to prevent x-site scripting then you should let the controller take care of it. Or maybe you could do the replace inside the controller code.

I also use Server.HtmlDecode(model.value); in the view.

<%= Html.TextBox("owner", Server.HtmlDecode(Model.owner), new { @class = "ForumItemTitleEntry", name = "title" })%>

Answer 2

Monitoring the keystrokes themselves is much more complicated then simply validating the input field. Maybe try something like this in Javascript:

document.getElementById("myTextArea").onkeyup = function() {
    this.value = this.value.replace(/<|>/g, "");
}

Answer 3

Check the input on the server side. This is a necessity. Data from the client side cannot be trusted at all. Imagine what will happen if someone disables your script in their browser. I recommend you to simply replace < with < and > with >, or remove them alltogether. (Alternatively, you could also strip the input from any HTML tags.) This is a safe and simple solution.

Even better than that, you could allow some HTML tags to be posted (basic text formatting, for example), and use an HTML sanitizer to remove disallowed content from it.
I have had much success with NSoup for this purpose.
About the latter, check out this question.

Answer 4

You have to check the input on the server side. There is no other solution.

But as an answer for your question, give this little code snippet a try

$(document).ready(function() {
  $("#Notes").bind("keydown", function(ev) {
    if (ev.keyCode === 226)
      ev.preventDefault();
  })
});​

Answer 5

Are you trying to prevent from entering in textbox?

If that is the case then you can do the following.

jQuery("#textid").keyUp(function(){

    if (jQuery('#textid').val().indexOf('<') != -1) {
                    jQuery('#textid').val(jQuery('#textid').val().replace('<', ''));
                }
    else if(jQuery('#textid').val().indexOf('>') != -1) {
                    jQuery('#textid').val(jQuery('#textid').val().replace('>', ''));
                }
    }); 

Answer 6

If you want to identify char-keys, always observe onkeypress instead of other key-events, keypress will give you the correct keycode. I recommend the use of firebug, it would have give you a notice about this.

But like the many others said, you also must validate this on the serverside, while there are many other ways to insert chars into a textbox. What you like to do could only be a feature for the convenience of your users, nothing more.

Answer 7

I used jquery and numeric to restrict user input to decimal numbers. Admittedly not quite what your looking for, but still worth a shout I thought.