Thursday, 19 September 2013

How To: Control character count p tag with contenteditable="true"?

How To: Control character count p tag with contenteditable="true"?

Question:
How to control character count inside a p tag with the new html5
attribute, contenteditable="true" ?

I've found out how to do this with a textarea:
http://jsfiddle.net/timur/47a7A/ (working)

But how would would I do this with a p tag?
http://jsfiddle.net/47a7A/133/ (not working)


HTML
<p id="textarea" maxlength="99" contenteditable="true">This content is
editable with a max character count of 99.</p>
<div id="textarea_feedback"></div>
JQUERY
$(document).ready(function() {
var text_max = 99;
$('#textarea_feedback').html(text_max + ' characters remaining');
$('#textarea').keyup(function() {
var text_length = $('#textarea').val().length;
var text_remaining = text_max - text_length;
$('#textarea_feedback').html(text_remaining + ' characters
remaining');
});
});

No comments:

Post a Comment