We help IT Professionals succeed at work.

How can I disable my textarea editor ?

lulu50
lulu50 used Ask the Experts™
on
How can I make my text area editor disabled if the user typed in more than 4000 characters?

I have tried the disable syntax but it's not working


<link type="text/css" rel="stylesheet" href="~/Content/CWScss/jodit.min.css">
<script type="text/javascript" src="~/Scripts/jodit.min.js"></script>


 jQuery(function () {
            var maxLength4000 = 4000;
            $(document).on("keyup paste blur click touchend", function () {
                var textlen = maxLength4000 - $("#AttributesAndValue").val().length;

                 //Here I want to say if textlen more than 4000 char then disable my text editor 
                //my disable is not working 

                if ($("#AttributesAndValue").text().length == 4000 || textlen <= -1) {
                    $('#AttributesAndValue').prop("disabled", true);
                }


                $('#rchars').text(textlen);
            });
            $('#AttributesAndValue').each(function () {
                var AttributesAndValue = new Jodit(this);
                AttributesAndValue.setDisabled();
            });
        });


                  <div class="form-group purple-border">
                        Attribute(s) and Value(s)
                        @Html.TextArea("AttributesAndValue", new { @class = "form-control", @style = "width:77%" })
                          <div id="ValidateAttributesAndValue" style="color:#bc0606;font-weight:bold;">Required Field</div>
                        <span id="rchars">4000</span> Character(s) Remaining
                    </div>

Open in new window



Thanks,
Lulu50
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

why would you do that? it's not making sense, as maybe the user want to edit the text...
Or explain what exaclty the problem is...

When we limit the text area with Javascript it is only for User experience, you will need to validate the result using Server side code PHP / .NET to make sure and display a message if this is too much or not enough character before saving the info.

Javascript can be bypassed by any user using the browser console.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
This is something that is common to do although as mentioned, javascript can be turned off so you do want to check on the serverside for a maximum amount of characters and not rely on what is submitted. But that should go for anything.

I looked at the documentation for jodit and this does not seem to be part of the api. What you can do is load it on start through a function. Then listen for the number of characters and disable that way.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
I looked through the documentation again and there is ability to limit by words or characters.

https://xdsoft.net/jodit/doc/options/limitWords/
https://xdsoft.net/jodit/doc/options/limitChars/
Use: attr() insted prop()

.attr("disabled",true)
Multitechnician
Top Expert 2014
Commented:
you don't really want to disable it because you also want the user to be able to modify it
anyway here you can limit the number of char to 4000 : https://jsfiddle.net/ptk4quc5/

<link type="text/css" rel="stylesheet" href="~/Content/CWScss/jodit.min.css">
<script type="text/javascript" src="~/Scripts/jodit.min.js"></script>


        jQuery(function() {
            var maxLength4000 = 4000;
            $(document).on("keyup paste blur click touchend", function () {
            		var text = $("#AttributesAndValue").val();
                var textlen = maxLength4000 - text.length;
                if(text.length>4000) {
	                editor.value = text.substr(0,4000);
                }
                $('#rchars').text(textlen);
            });
            var editor = new Jodit("#AttributesAndValue");
        });

                  <div class="form-group purple-border">
                        Attribute(s) and Value(s)
                        @Html.TextArea("AttributesAndValue", new { @class = "form-control", @style = "width:77%" })
                          <div id="ValidateAttributesAndValue" style="color:#bc0606;font-weight:bold;">Required Field</div>
                        <span id="rchars">4000</span> Character(s) Remaining
                    </div>

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
I just took the time to test and it works as expected.

Here is a codepen that limits to 10 characters.

https://codepen.io/padas/pen/VwwdzKW
<div id="editor"></div>

Open in new window

var editor = new Jodit('#editor', {
    height: 200,
    limitChars: true | 10
});

Open in new window


https://xdsoft.net/jodit/doc/options/limitChars/
lulu50Web application

Author

Commented:
leakim971

Oh c'est fabuleux!!!

Thank you for 1,0000 and 1 times

Lulu50
lulu50Web application

Author

Commented:
bien joué!!!

The best answer ever

Thanks,
Lulu50
leakim971Multitechnician
Top Expert 2014

Commented:
tout le plaisir est pour moi.
you welcome