Turning obtrusive JavaScript to unobtrusive

Question

I am struggling to see how to turn a piece of javascript from obtrusive to unobtrusive, can anybody shed some light?

Here's the script:

function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;          
    }

Here's the JSFiddle: http://jsfiddle.net/pxmmh/

Answer 1

If you want a truly unobtrusive solution, some jQuery will work wonders for you

$(document).ready(function () {

    $('#limitedtextfield').keyup(function () {
        limitText(this.form.limitedtextfield, this.form.countdown, 15);
    });

    $('#limitedtextfield').keydown(function () {
        limitText(this.form.limitedtextfield, this.form.countdown, 15);
    });

    function limitText(limitField, limitCount, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        } else {
            limitCount.value = limitNum - limitField.value.length;
        }
    }
});

See JSFiddle here http://jsfiddle.net/x65Kw/