Limit the number of characters in a WYSIWYG Editor (NicEdit)

Question

I have this jQuery code:

var char = 60;
    $("#counter").append("You have <strong>" + char + "</strong> char.");
    $("#StatusEntry").keyup(function () {
        if ($(this).val().length > char) {
            $(this).val($(this).val().substr(0, char));
        }
        var rest = char - $(this).val().length;
        $("#counter").html("You have <strong>" + rest + "</strong> char.");
        if (rest <= 10) {
            $("#counter").css("color", "#ff7777");
        }
        else {
            $("#counter").css("color", "#111111");
        }
    });

It works fine! But if instead a val() I have text() it doesn't work.

The problem is that at the end of available char it start to replace the text from the beginning...... using val is perfect.

Why I need it on text? Because I'm using a wysiwyg plugin and it convert my textarea to div.

I'm trying with .stopPropagation but it doesn't work.. trying with return false and nothing...

Hope in your help!

Which line does it not work when you change val() to text() ... what doesnt work ? and can you please include your HTML ... i have no idea what statusentry is ... — Manse, Nov 16 '11 at 21:42
if you change every val() to text() and you start typing, at 60 char it start to replace the text from begin. — Andrea Turri, Nov 16 '11 at 21:44
Your substr was incorrect, works here -> http://jsfiddle.net/RjNuX/2/ — Manse, Nov 16 '11 at 21:50
yes exactly, if you use a wysiwyg plugin and if you don't have anymore a textarea but a
you need to use .text() to get values... and it doesn't work anymore... — Andrea Turri, Nov 16 '11 at 21:50
More than likely the rich text editor is more than a simple div and has its own callback that you can use to achieve this. Which editor are you using? — Kevin B, Nov 16 '11 at 21:51
text() wont work on a textarea as the text within it is stored as its value - can you tell us which WYSIWYG editor your using ? — Manse, Nov 16 '11 at 21:52
Works fine for me using a div and contentEditable=true -> http://jsfiddle.net/RjNuX/3/ — Manse, Nov 16 '11 at 22:04
please insert an answer so I can close the question. Thanks. — Andrea Turri, Nov 16 '11 at 22:09
you mean you dont need the WYSIWYG editor any more ? just a contentEditable div ? — Manse, Nov 16 '11 at 22:13

score 7 · Accepted Answer · answered Nov 16 '11 at 22:16

If you need to use the NicEdit then you can limit the keystrokes by binding the keyup / keydown event to the newly created div (it doesnt replace your textarea - its adds a div and hides your textarea) :

$("#StatusEntry").prev().keydown(function () {

This works because the newly create div is always preceding the textarea - so this will work for multiple editors.

However as you seem to have indicated in your comments a contentEditable div may be sufficient - if it is use the following method :

    var char = 60;
    $("#counter").append("You have <strong>" + char + "</strong> char.");
    $("#StatusEntry").keyup(function () {
        if ($(this).text().length > char) {
            $(this).text($(this).text().substr(1));
        }
        var rest = char - $(this).text().length;
        $("#counter").html("You have <strong>" + rest + "</strong> char.");
        if (rest <= 10) {
            $("#counter").css("color", "#ff7777");
        }
        else {
            $("#counter").css("color", "#111111");
        }
    });

Demo : http://jsfiddle.net/RjNuX/3

the solution you suggest works, but replacing the textarea with a div simply cancels the form submitting. (There is no textarea to submit). How could this be done without replacing textarea with a div? — zekia, Jul 30 '12 at 13:24

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

var len = 40;    
$(".nicEdit-main").keydown(function () {
    if($(".nicEdit-main").html().length>len){
        var string = $('.nicEdit-main').html();
        $('.nicEdit-main').html(string.substring(0, len));
        placeCaretAtEnd($('.nicEdit-main').get(0));
    }
});

placeCaretAtEnd function from here

edited May 23 '17 at 11:44

Community

1
1

answered Nov 05 '14 at 16:11

Michael L Watson

964
13
23

score 0 · Answer 3 · answered Nov 16 '11 at 22:07

0

you have to target the nice edit div.

$(".nicEdit-main").keyup(...

If you have multiple editors, this solution will not work.

answered Nov 16 '11 at 22:07

Kevin B

94,570
16
163
180

Limit the number of characters in a WYSIWYG Editor (NicEdit)

3 Answers3

Linked