It shouldn't be too difficult, you would need a div that had its content updated on the keyup event for the input box:
This is a little bit from memory and may need some adjustment but it should get you on the right path:
= fb.input :short_statement, :label => 'Describe yourself! (25 words) ' , :input_html => {:id => "bio_prof_stmt" }, :onkeyup => "update_word_count(this);"
I think this is the right haml syntax, please correct me if not:
#word-count-container
The intended html:
<div id="word-count-container"></div>
Javascript:
<script type="text/javascript">
function update_word_count(object) {
words = object.value.match(/\S+/g).length.toString();
$('#word-count-container').innerHTML = words + " out of 25 used";
}
</script>
Alternative UJS approach (remove the onkeyup tag from the input):
<script type="text/javascript">
$('#short_statement').onkeyup(function() {
update_word_count(this);
});
function update_word_count(object) {
words = object.value.match(/\S+/g).length.toString();
$('#word-count-container').innerHTML = words + " out of 25 used";
}
</script>