javascript form remaining # of characters counter - modification requirement for xhtml strict validation

Question

I used this javascript code in my page & then checked against w3c validator. I got 2 errors which are:

1. there is no attribute "onKeyDown"
2. there is no attribute "onKeyUp"

I won't change my html declaration type to transitional. So I need modification in script.

Script HTML

<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100);" onKeyUp="textCounter('message','messagecount',100);"></textarea>
<span id="charsleft"></span>

Script Javascript:

<script>
    function textCounter(textarea, countdown, maxlimit) {
        var textareaid = document.getElementById(textarea);
        if (textareaid.value.length > maxlimit)
          textareaid.value = textareaid.value.substring(0, maxlimit);
        else
          document.getElementById('charsleft').innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
      }
</script>

<script type="text/javascript">
    textCounter('message','messagecount',100);
</script>

Since I know nothing about javascript, I kindly ask you: what should be the modification so my page will be XHTML 1 strict validated? Or do I have to look for another script that is XHTML 1.0 Strict validated and does the same stuff?

Note: For the time being script works in this way: when you write in textarea, the part between two spans in <span id="charsleft"></span> appears and writes the number of remaining characters in real time. The way of showing style is not important for me. For example, first value (limit for number of characters) can be always visible. Only point is validation of W3C.

Thanks, BR

Answer 1

The w3c validator includes a "How to fix" hint when it gives errors like that.

In your case, it says:

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case)...

That is, change the attribute names to be all lower case:

<textarea id="message" cols="20" rows="5" name="message" onkeydown="textCounter('message','messagecount',100);" onkeyup="textCounter('message','messagecount',100);"></textarea>
<span id="charsleft"></span>

It would be better to remove the inline event attributes and add event handlers from the JS in your script block, but I'm feeling lazy so I'm declaring that out of scope. (Google "unobtrusive javascript" for some hints about that.)