Control Count on P tag w/ Content Editable
HTML
<p class="textarea" maxlength="99" contenteditable="true">This content i with a max character count of 99.</p>
<div class="textarea_feedback"></div>
<p class="textarea" maxlength="120" contenteditable="true">This content is editable with a max count of 99.</p>
<div class="textarea_feedback"></div>
<p class="textarea" maxlength="50" contenteditable="true">This content is editable with a max character</p>
<div class="textarea_feedback"></div>
CSS
p {
padding: 1em;
border: 1px solid black;
}
JavaScript
$.fn.limitText = function(option) {
'use strict';
var self = this,
that = option || {};
return (function () {
var text_remaining,
textAreas = self,
i,
textAreasCount = textAreas.length,
maxLength,
maxLength2,
selector = that.selector || false,
charTxt = selector?(that.text?' ' + that.text:''):false;
var textAreasAll = (function () {
for (i = 0; i < textAreasCount; i++) {
textAreas[i].onkeydown = function (e) {
if(!(e.keyCode == 8)) {
maxLength = this.attributes['maxlength'].value;
//countText(this, maxLength);
return this.innerText.length < maxLength;
}
};
textAreas[i].onkeyup = function () {
maxLength2 = this.attributes['maxlength'].value;
copyPastePrevent(this, maxLength2);
//countText(this, maxLength2);
};
}
}());
var countText = selector?function (obj, maxChar) {
text_remaining = maxChar - $(obj).text().length;
$(obj).next(that.selector).html(text_remaining + charTxt);
}:function(){
return false
};
var copyPastePrevent = function (obj, max) {
var chopped;
if ($(obj).text().length > max) {
chopped = $(obj).text().substring(0, max);
$(obj).html(chopped);
}
};
}());
};
$(".textarea").limitText({selector: ".textarea_feedback", text : "chars rem"});