Restrict user to enter HTML TAGS into a textarea using jquery

Question

I have a textarea field and I want the user to be not able to enter HTML TAGS it to textarea.

Is that possible?

EXAMPLE

    <textarea rows="4" cols="30" id="textareadescription"></textarea>

In this user not able to enter HTML TAGS like

      <button> Submit </button>

why you want to do that? you can trap keypresses using jquery/javascript and disable it. but that will be so annoying. instead let them write and upon submission, you filter out all the html tags by a simple string replace alogrithm — Manish Mishra
– Manish Mishra, Commented Nov 21, 2012 at 10:21
Disable the controle could help you? <textarea rows="4" cols="30" id="textareadescription" disabled="disabled"> — Felipe Oriani
– Felipe Oriani, Commented Nov 21, 2012 at 10:26

rahul · Accepted Answer · 2012-11-21 11:28:08Z

6

you can do it like this

function Check(){

var reg =/<(.|\n)*?>/g; 

if (reg.test($('#YourTextAreaID').val()) == true) {

    var ErrorText ='do not allow HTMLTAGS';

    alert('ErrorText');

    }
}

MORE INFO

http://www.pagecolumn.com/tool/all_about_html_tags.htm

answered Nov 21, 2012 at 11:28

rahul

7,6738 gold badges42 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

S. Francis · Accepted Answer · 2018-10-22 12:15:24Z

The way I would do it is as follows. This can be made more efficient by refactoring the replacements into a function. But I elaborated it to explain the procedure simply ...

           var str =   $('#textareadescription').val();
           //Temporarily replace the HTML elements I can accept
            str = str.replace(/<\/b>/g, "@@/b@@");
            str = str.replace(/<br>/g, "@@br@@");
            str = str.replace(/<i>/g, "@@i@@");
            str = str.replace(/<\/i>/g, "@@/i@@");

            //render all other HTML elements harmless
            str = str.replace(/</g, "&lt;");
            str = str.replace(/>/g, "&gt;");

            //put back the HTML elements I can accept
            str = str.replace(/@@b@@/g,"<b>");
            str = str.replace(/@@\/b@@/g,"</b>");
            str = str.replace(/@@i@@/g,"<i>");
            str = str.replace(/@@\/i@@/g,"</i>");
            str = str.replace(/@@br@@/g,"<br>");


//At this point str should contain only the HTML elements that I can accept.

Pulkit Mittal · Accepted Answer · 2012-11-21 10:48:32Z

1

You can prevent the users from entering < and > signs, if those are not really required for your input text.

The following javascript code does so:

$(function(){
    $('#textareadescription').on("keydown", function(e){
        if (e.shiftKey && (e.which == 188 || e.which == 190)) {
            e.preventDefault();
        }
    });
});

Try out the working demo here: http://jsfiddle.net/AHrrP/1/

answered Nov 21, 2012 at 10:48

Pulkit Mittal

6,1165 gold badges23 silver badges28 bronze badges

3 Comments

Manish Mishra Over a year ago

wat if i want to write a text like this: 500>400 ? besides, i can always copy and paste

Pulkit Mittal Over a year ago

Valid point @Manish. Depends on how much particular Ishan wants to be.

usmanjutt84 Over a year ago

What if user copy and paste test including HTML tags?

Community · Accepted Answer · 2017-05-23 12:18:43Z

Below are the options you can go for:

you can disable < or > symbol on your Textarea. this will show you how to do something on a particular key press.
you let them write html tags in the textArea. upon submission, you reprocess the string and then send it to the server.

below is the script to reprocess your textArea content

function reProcessText(){

        var text= $('myTextArea').html();
        var startTag=-1;
        var endTag=-1;
        for(var i=0;i<text.length;i++){
            if(text[i]=='<')
             startTag=i;
        if(text[i]=='>')
             endTag=i;
        if(startTag != -1 && endTag!=-1){
             text = text.substring(0,startTag) + text.substring(startTag+1, endTag);

            startTag=endTag=-1;
          }
        }  
}

I have written a super simple algo to look for and replace html tags. for sure, you may have to employ more complex one, based on your need.

Akhil Sekharan · Accepted Answer · 2012-11-21 10:51:19Z

0

The scenario:

User enters " Submit " in the textarea.
Later on, you copy that value and show it in a div.

So what you want to do is:

Make sure div is not showing a button. It will show the exact value what the user typed.

You can use jquery's html() and text() functions here.

For example: If you use this, the result div will generate a button.

    <textarea rows="4" cols="30" onkeyup="$('#divDesc').html($('#textareadescription').val());" id="textareadescription"></textarea>
    <div id="divDesc"> Result </div>

But if you use this, the result div will not generate button, but show the value:

    <textarea rows="4" cols="30" onkeyup="$('#divDesc').text($('#textareadescription').val());" id="textareadescription"></textarea>
    <div id="divDesc"> Result </div>

edited Nov 21, 2012 at 10:51

answered Nov 21, 2012 at 10:45

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Comments

Kalpesh Shende · Accepted Answer · 2018-10-21 08:08:09Z

0

To strip out html tags, I use. mysqli_real_escape_string(); addslashes();

answered Oct 21, 2018 at 8:08

Kalpesh Shende

1127 bronze badges

Comments

Siddique · Accepted Answer · 2021-01-12 09:27:30Z

-2

<script>
    $(document).ready(function() {
        $('#description').summernote(
            {
                placeholder: 'Description',
                tabsize: 2,
                height: 100,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['fontsize', ['fontsize']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']]
                ],
                codemirror:{theme: 'monokai'},
                fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New']
            }
        );
    });
</script>

answered Jan 12, 2021 at 9:27

Siddique

1

1 Comment

Siddique Over a year ago

Collectives™ on Stack Overflow

Restrict user to enter HTML TAGS into a textarea using jquery

7 Answers 7

Comments

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related