set character limit for editable div

Question

I have a div element .userbio , which is used to display "About me". When you click on the element, it becomes a textarea, where i can edit the information. But it should stop, when the character limit reaches 180. A plugin is being used for editing the "about me" section https://code.google.com/p/jquery-in-place-editor/

On clicking the .userbio element, .editInPlace class of the plugin gets attached to the .userbio element. So i've tried setting css .editInPlace textarea { maxlength:180 }, it doesn't work.

What happens now is that, i can type in as many characters i can and it overflows the entire page. I want the editing to stop, when it reaches the limit of 180 characters. Even tried some Jquery code snippets, but it doesn't work. Thank You

you should check out http://shar.es/1ahrtb this will help you set max limit and not allow to edit. — Aakash Doshi, Sep 23 '14 at 15:45

score 1 · Answer 1 · answered Sep 23 '14 at 15:40

1

You could bind a keyup event and substring the text if it exceeds the character count limit...

var limit = 180;

$("textarea").on("keyup", function() {
  var val = $("textarea").val();
  if(val.length > limit)
    $("textarea").val(val.substr(0, limit));
});

textarea {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<textarea>text</textarea>

answered Sep 23 '14 at 15:40

LcSalazar

16,524
3
37
69

This code works fine, but there is one problem. My div element in console upon clicking on it, looks like this `class="userbio editInPlace-active"`. So, i tweaked your code a bit and wrote `$('.userbio .editInPlace-active')`, but it doesn't work – sandesh ps Sep 23 '14 at 15:54
You can use `$(".userbio").on("keyup", "textarea", function() {` – LcSalazar Sep 23 '14 at 15:58

score 1 · Accepted Answer · edited Sep 23 '14 at 16:11

I would consider adding the code for maxlength to the jquery plugin. From what I can see this is controlled in the function createEditorElement so just add that

createEditorElement: function() {
    if (-1 === $.inArray(this.settings.field_type, ['text', 'textarea', 'select']))
            throw "Unknown field_type <fnord>, supported are 'text', 'textarea' and 'select'";

    var editor = null;
    if ("select" === this.settings.field_type)
            editor = this.createSelectEditor();
    else if ("text" === this.settings.field_type)
            editor = $('<input type="text" ' + this.inputNameAndClass() 
                    + ' size="' + this.settings.text_size  + '" maxlength="' + this.settings.text_max + '" />');
    else if ("textarea" === this.settings.field_type)
            editor = $('<textarea ' + this.inputNameAndClass() 
                    + ' rows="' + this.settings.textarea_rows + '" '
                    + ' cols="' + this.settings.textarea_cols + '" maxlength="' + this.settings.textarea_max + '"/>');

    return editor;
}

Then add the default values for text_max and textarea_max to the top default settings object

$.fn.editInPlace.defaults = {
    text_max: 180,
    textarea_max: 180,
    .... rest of defaults ....
}

score 1 · Answer 3 · edited Sep 23 '14 at 16:10

We have to find a way to add :

$(".editInPlace").attr("maxLength", 180);

Somewhere.

So we have to find a "hook" to set this attribute to the textarea when it pops out. I tried to look for this kind of hook in the documentation of the plugin but did not find one.

If nobody finds a better way to solve your problem, you can change the library's source code directly.

createEditorElement: function() {
    if (-1 === $.inArray(this.settings.field_type, ['text', 'textarea', 'select']))
        throw "Unknown field_type <fnord>, supported are 'text', 'textarea' and 'select'";

    var editor = null;
    if ("select" === this.settings.field_type)
        editor = this.createSelectEditor();
    else if ("text" === this.settings.field_type)
        editor = $('<input type="text" ' + this.inputNameAndClass() 
            + ' size="' + this.settings.text_size  + '" />');
    else if ("textarea" === this.settings.field_type)
        editor = $('<textarea ' + this.inputNameAndClass() 
            + ' rows="' + this.settings.textarea_rows + '" '
            + ' cols="' + this.settings.textarea_cols + '" />');

    return editor;
},

And before returning "editor", add something like this:

if(this.settings.textarea_maxLength) {
    editor.attr("maxLength", this.settings.textarea_maxLength);
}

Then you'll have to set the "maxLength" attribute as an option field when you instantiate the editInPlace:

$("#editme1").editInPlace({
    /* the options you had before */
    textarea_maxLength: 180
});

But it seems a bit tricky and I didn't test it, maybe you should consider asking the plugin's developer directly.

^{oops I didn't refresh the page before posting, sorry. This is basically the same solution as @pln}

Somehow this looks like a copy of another answer: http://stackoverflow.com/a/25999481 — Artjom B., Sep 23 '14 at 16:03
Yeah, I edited my message to mention this fact. Took me some time to format the code properly. My bad. — Javier92, Sep 23 '14 at 16:05

score -2 · Answer 4 · answered Sep 23 '14 at 15:29

-2

In jQuery, you can achieve the effect by disabling the input when the length of the inner text exceeds 179 characters:

if ( $('.userbio').text().length > 179 ) {
    $('.userbio').prop('disabled', true);
}

Alternatively, HTML5 supports a maxlength property on textarea elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

answered Sep 23 '14 at 15:29

rnevius

26,578
10
58
86

1

And how can a user fix a spelling mistake? – epascarello Sep 23 '14 at 15:30
This answers the OP's question. Not sure why it deserves a downvote. Of course this isn't helpful if there's a spelling mistake, but that isn't what was asked. – rnevius Sep 23 '14 at 15:31
Updated the answer with another, HTML5 based solution. – rnevius Sep 23 '14 at 15:33
@mevius This code is not working. – sandesh ps Sep 23 '14 at 15:34
@mevius As the textarea is generated by plugin, setting css doesn't work. Also, it should stop editing, while typing in itself, when it reaches limit 180 – sandesh ps Sep 23 '14 at 15:36
The HTML5 attribute has nothing to do with CSS... – rnevius Sep 23 '14 at 15:36

set character limit for editable div

4 Answers4