Geek asks and answers

Counting characters in contentDditable DIV

I use this plugin to count characters on inputs and text areas: http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas

I would need to recalculate the characters also in the DIV if the parameter "contentEditable" is set to True.

Is it possible to modify this plugin?

I think I need to change something on this line:

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

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

Thank!

Edit:

I do this as brettz9 suggested:

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

I have only one small problem when doing this for another field that I need to have a minimum / maximum length (I have one input and one contentEditable)

This is the conditional part:

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

, [] var "other_required"

+3
2

:

// 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;
+1

val() , textarea, textbox .. text().

EDIT:

:

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

:

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

More articles:


All Articles