what's the best way to put a counter on all text fields

Original title - Disable every textfield/ input field from user to enter after limit (500), but allow to delete characters"

Sub Question (related): When is it best to deduct the characters from the input field - what action event should i use - on keyup or onchange using jquery?

I think I've solved my problem, just have to test my solution.

Problem is discussed below. I have this form where each textfield is being monitored and the total number of characters being tallied. There is a limit on all the text fields' characters not to reach greater than 500 characters.

When I first did this, I did my research and found that there are scripts which work on only one text field, which when you type more, it removes -1 from the total length of the string (using string.length) and so it appears that you've disabled the user from entering more. However this only works on a single input field.

My problem is that I have to do this for a couple of fields.

My solution currently is to disable the field the user is typing on (using $(this).disable() / or I could selected input:focused maybe). The problem is if the user presses backspace, he can't do that anymore.

EDIT I DID TRY to think of a way where I get total of characters, remove all the other field's length, then after getting the difference, deduct the number of characters from the currently changing field.

So I think this would work:

1. step 1 (get total) ) $('input, textarea').val().length()
2. step 2 (get absolute value difference between total and 500)
3. step 3 remove the absolute value difference from the currently focused textfield.

EDIT: I sort of have the solution in my head but I just think it will work because I think there's one step I'm missing. Is my logic is sound?

Anyway, i put the code up online http://jsfiddle.net/boywiththemagictattoo/5V6ax/3/ to better understand the problem.