How to block special characters in HTML input field?

Question

I just want ask if how I will block special characters such as <,>,",/,etc. in html input field?

By "block" do you mean not allowed to be typed in? What about pasting text? — Spencer Wieczorek, Oct 14 '17 at 17:18
For what purpose? Are you trying to prevent the user from using HTML? — ceejayoz, Oct 15 '17 at 03:34

score 6 · Answer 1 · answered Oct 18 '17 at 08:55

6

Why not use html5?

<input type="text" pattern="[^()/><\][\\\x22,;|]+">

answered Oct 18 '17 at 08:55

RaShe

1,851
3
28
42

3

This way must to use in a form. – sametcodes Oct 18 '17 at 08:57

score 4 · Answer 2 · answered Oct 18 '17 at 08:46

You can explicitly state which characters you accept HTML input pattern Attribute

If you insist on blocking specific characters you can use the following:

document.getElementById("explicit-block-txt").onkeypress = function(e) {
    var chr = String.fromCharCode(e.which);
    if ("></\"".indexOf(chr) >= 0)
        return false;
};

<input type='text' id='explicit-block-txt' value='' onpaste="return false"/>

score 4 · Accepted Answer · answered Oct 18 '17 at 08:59

4

You can use regex.

document.getElementById("input").onkeypress = function(e) {
    /^[a-zA-Z0-9]+$/.test(this.value) // return true or false
};

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

answered Oct 18 '17 at 08:59

sametcodes

583
5
8

It is not *blocking*. `pattern` is for validation only – vsync Sep 29 '21 at 19:56

How to block special characters in HTML input field?

3 Answers3

Linked