Change textarea field to a div ?

[mp5163093]

Hello Everyone,
I am tyring to change the textarea to a div


<div id="editor" contenteditable="true" name="content"></div>

and is not working.
Anyone, do you have any idea why is not working when i use div tag ?
Any help is greatly appreciated


<div class="word-count">
<textarea id="editor" name="content" rows="30" cols="100"></textarea><br />
Character Count: <span class="chars"></span> |
Word Count: <span class="words"></span> |
Paragraph Count: <span class="paras"></span><br />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var wordCounter = {
el: '.word-count',

initialize: function() {
var _this = this;
$('div', this.el).on('keyup', function() { _this.update( $(this).text() ); });
$('div', this.el).on('keyup', function() { _this.update( $(this).text() ); });
},

update: function(value) {
$('.chars', this.el).html( this.getCharCount(value) );
$('.words', this.el).html( this.getWordCount(value.trim()) );
$('.paras', this.el).html( this.getParaCount(value.trim()) );
},

/* getCharCount:
* - Calculates the number of characters in the field. - Counts *all* characters.
*/

getCharCount: function(value) {
return value.length;
},

/* getWordCount:
* - Calculates the number of words in the field. - Words are separated by any number of spaces or a semi-colon.
*/

getWordCount: function(value) {
if (value) {
var regex = /\s+|\s*;+\s*/g;
return value.split(regex).length;
}
return 0;
},

/* getParaCount:
* - Calculates the number of paragraphs in the field. - Paragraphs are separated by any number of newline characters.
*/

getParaCount: function(value) {
if (value) {
var regex = /\n+/g;
return value.split(regex).length;
}

return 0;
}
};
wordCounter.initialize();
</script>

[jscheuer1]

Well it does sort of work. The problems I see are that, since a contenteditable div is not a textarea, text is represented within it differently. When you hit enter in a textarea, (depending upon OS) a \n\r character pair or either a \n or a \r character is inserted. In a contenteditable div what happens is an element or elements are created in order to show the intended linebreak. In my browser that's div, in others it might be p or br, but adding an actual linebreak character would not produce one because it's a div and the text in a div doesn't break on a \n\r, \n, or \r. So, when you take the .text() of the div, all linebreaks represented by contained elements are lost, including the spaces between words that are created/represented by them. One would have to analyze the .html() or child elements and do so in different ways than the current functions for word count and paragraph count do in order to get an accurate measure of those things.

BTW, you have:


$('div', this.el).on('keyup', function() { _this.update( $(this).text() ); });
$('div', this.el).on('keyup', function() { _this.update( $(this).text() ); });

These two lines are identical in meaning, only one of them is needed. But that doesn't change the outcome, just adds a little extra processing time.