Count characters in contentEditable DIV

Question

I'm using this Plugin to count chars on inputs and textareas: http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas

I would need to count characters also in a DIV with the setting "contentEditable" set to True.

Is this possible modifiying this Plugin?

I think I would need to change something in this line:

            var count = $(obj).val().length;

But i really don't know how the contentEditable works... Any idea?

Thanks!

Edit:

I'm doing this as brettz9 suggested:

var method = $.inArray(obj.nodeName.toLowerCase(), ['textarea', 'input']) !== -1 ? 'val' : 'text';
var count = $(obj)[method]().length;

I just have one little problem on doing this for other field I required t have a min/max lenght (I have one input and one contentEditable)

This is that conditional part:

                if (other_required){
                if ($(other_required).val().length > 0 && available >= 0){
                    $(submit_button).attr("disabled", "");
                } else {
                    $(submit_button).attr("disabled", "disabled");
                }

i don't know how to declare that [method] var and use it with "other_required"

edited May 15 at 5:55

asked May 15 at 3:50

Santiago
1116

77% accept rate

1

"[method]" is allowing the method string ("val" or "text") to be used as the dynamic name of the method, depending on whether the element is a textarea (or input) or not. It is thus equivalent to $(obj).text() or $(obj).val() depending on the nodeName (the type of element). For above, you can replace ".val()" with "[method]()" and then on the line above, set "method" to "val" or "text" as I did. At least this is what i understand u want to do. – brettz9 May 15 at 12:59

"[method]" is allowing the method string ("val" or "text") to be used as the dynamic name of the method, depending on whether the element is a textarea (or input) or not. It is thus equivalent to $(obj).text() or $(obj).val() depending on the nodeName (the type of element). For above, you can replace ".val()" with "[method]()" and then on the line above, set "method" to "val" or "text" as I did. At least this is what i understand u want to do.

brettz9 · Answer 1 · 2011-05-15 04:34:52Z

up vote 1 down vote accepted

You can do it like this:

// We'll assume it is contenteditable (which uses text, or could also use html (innerHTML) if you wanted to count markup length) 
//  if it is not a textarea or input (which uses value)
var method = $.inArray(obj.nodeName.toLowerCase(), ['textarea', 'input']) !== -1 ? 'val' : 'text';
var count = $(obj)[method]().length;

answered May 15 at 4:34

brettz9
1,369210

Thanks brettz, that works perfect... I have just one problem with one modification I've made to the plugin to require multiple inputs min/max lenghts... It's something like "if (other_required){ if ($(other_required).val().length > 0 && available >= 0){ $(submit_button).attr("disabled", ""); } }" I don't know how to call the [method] var for that instance and that "other_required" object (Because I have 1 input and 1 contentEditable now) – Santiago May 15 at 5:44

Mohamed Nuur · Answer 2 · 2011-05-17 00:39:39Z

val() is used to get input values such as textarea, textbox, etc. Try text() instead.

EDIT:

Try this:

function count(obj) {
  var method = $.inArray(obj.nodeName.toLowerCase(), 
    ['textarea', 'input']) !== -1 ? 'val' : 'text';
  return $(obj)[method]().length;
}

And your code would look like:

if (other_required){
if (count(other_required) > 0 && available >= 0){
    $(submit_button).attr("disabled", "");
} else {
    $(submit_button).attr("disabled", "disabled");
}

asked	25 days ago
viewed	68 times
active	today

Count characters in contentEditable DIV

2 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged jquery counter contenteditable or ask your own question.

Hello World!

Count characters in contentEditable DIV

2 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged jquery counter contenteditable or ask your own question.

Hello World!

Related