Count HTML text area characters not to exceed 4000.

lulu50
lulu50 used Ask the Experts™
on
Count HTML text area characters not to exceed 4000.  

I'm not able to display the total count of characters.

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

 $('#AttributesAndValue').each(function () {
            var AttributesAndValue = new Jodit(this);
            //editor.value = '<p>start</p>';
        });

        var maxLength4000 = 4000;
        $('#AttributesAndValue').keyup(function () {
            // var textlen = maxLength4000 - $(this).val().length;
            $('#rchars').text(textlen);
        });


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

Open in new window


Thanks,
Lulu50
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
ste5anSenior Developer

Commented:
Post a concise and complete example. Thus the rendered HTML.

btw, how should a keyup in a div work?
Eduard GherguArchitect - Coder - Mentor

Commented:
Hi,

Try to handle the keypress event instead:

$('#AttributesAndValue').keypress(function () {...
ste5anSenior Developer

Commented:
@Eduardo: Maybe it's the lack of caffeine, but how should a key press or action work in a div?
Eduard GherguArchitect - Coder - Mentor

Commented:
@ste5an: There is a TextArea input rendered inside of div...
ste5anSenior Developer

Commented:
omg, I looked always at ValidateAttributesAndValue and wondered how.. thx.
Eduard GherguArchitect - Coder - Mentor

Commented:
@ste5an: No stress
Two things, for what you want, keyup IS still the safer option.
Keypress isn't going to capture Ctrl-V and pasting in text, so wouldn't show the updated value.

In any case, actual problem I'm guessing, is with the plugin.  Jodit is a WYSIWYG editor, so when you're typing, you're not actually editing inside the textarea control, you're typing in a contenteditable div that the plugin created.  The changes are mirrored as text into your underlying control, but it's not actually getting any key events.
With Jodit specifically, you should be able to do what you want binding to the "change" handler, it typically fires change events reliably to the underlying textarea control.
lulu50Web application

Author

Commented:
Snarf0001

you are correct keypress will not solve my problem because the textarea is Jodit editor.

do you know how I can get the count from this editor?

Thanks,
Lulu50
Yep, as mentioned, if you bind to the "change" even of the raw textarea, you should be good.
Jodit seems to be firing a change event back down to the input everytime it processes in the editable div.
Multitechnician
Top Expert 2014
Commented:
test page : https://jsfiddle.net/r25L8em4/

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.2.55/jodit.min.css" integrity="sha256-g1D89I8LUh+NivmoFJInXEY6w5hvw2HAu1D7bevYCiU=" crossorigin="anonymous" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.2.55/jodit.min.js" integrity="sha256-VD3iODu6eokdHLqACc2IE9x7XsxWBilQhHU0v/Xh4Rs=" crossorigin="anonymous"></script>
    <script>
        jQuery(function() {
            var maxLength4000 = 4000;
            $(document).on("keyup paste blur click touchend", function () {
                var textlen = maxLength4000 - $("#AttributesAndValue").val().length;
                $('#rchars').text(textlen);
            });
            $('#AttributesAndValue').each(function () {
                var AttributesAndValue = new Jodit(this);
                //editor.value = '<p>start</p>';
            });
        });
    </script>
</head>
<body>
<div class="form-group purple-border">
    Attribute(s) and Value(s)
    <textarea id="AttributesAndValue" name="AttributesAndValue" class="form-control" style="width:77%;"></textarea>
    <span id="rchars">4000</span> Character(s) Remaining
    <div id="ValidateAttributesAndValue" style="color:#bc0606;font-weight:bold;">Required Field</div>
</div>
</body>
</html>

Open in new window

Why don't use maxlength of TextArea?
@Html.TextArea("AttributesAndValue", new { @class = "form-control", @style = "width:77%" , maxlength=4000})
In keyup javascript only resfresh  counter with  textatra length.
$('#AttributesAndValue').keyup(function(){

 $("#rchars").html( (4000 - this.value.length) + " Characters  remaindIng"); 


});

Open in new window

As I mentioned a few comments back, this is a wysiwyg editor.  Keyup will do nothing, as the textarea itself isn't receiving any of the keystrokes, the editable div is.  Which is firing change events back to the control.

@leakim971 - the script you have is going to bind on every function of every item on the page.  It will work, but will fire and calculate farmore times than is necessary.

Just bind to $('#AttributesAndValue').on("change", function()...
Eduard GherguArchitect - Coder - Mentor

Commented:
Hi!
If it is an option for you, you can limit the number of chars that can be entered from the jodit's options:
https://xdsoft.net/jodit/doc/options/limitChars/
I did not notice jodit. As snarf0001 says textarea is a component of jodit and you should not do anything you do because the component has all the options you require. you only have to configure them when you create the component. If you want to control the size of the textarea with your own methods then remove the jodi. I recommend you check the jodit options. One of them already had it said: limitChars.
lulu50Web application

Author

Commented:
wow that's exactly what I'm looking for!!!!

Wow again lol Wow again lol

it's just so beautifully the way you put it together !!

Wow Well done leakim971

I Thank you so much for all your help.

Great Job Wow Well done !!!!

Thanks again,

one more wow lol (I'm very happy and speechless)

Lulu50
leakim971Multitechnician
Top Expert 2014

Commented:
Wow ! you welcome
lulu50Web application

Author

Commented:
leakim971

You are number one!!!
and I greatly appreciate your help.

Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial