Question

Im trying to accomplish this:

http://jsfiddle.net/WkVb9/

But instead of using a textarea, use an iframe with designmode = 'on'

http://jsfiddle.net/ysgEf/

It doesn’t seem to work =/

Answer 1

Have a look at this piece of code:

var editable = $(document.getElementById('edit').contentWindow.document);

editable.attr('designMode', "on").keyup(function(){
    var length = $(this).find('body').children('br, p, div').length;

    if($(this).find('body').html().length && !length){
        length = 1;
    }

    $('#lc').text(length);
});

Here’s the behavior of the various browsers tested:

• Firefox 3.6: <br /> tags are appended to form the line breaks. At the start, there’s no <br />, while after the first line break one is added before the current cursor position and one after
• Chrome: <div> are used to contain each line. <br /> are used for empty lines. The first line is not wrapped
• IE 8 Compatibility: <p> are used to contain each line.

Lesson: Don’t use contentEditable or designMode! The behavior is horribly inconsistent and quite useless for cases like this. Of course you can use hacks to get around this, but what happens when new browsers come out? You’d have to maintain this till the end of time!