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/

I'm struggling too. What do you mean by obtrusive and unobtrusive? — Waleed Khan, Mar 13 '13 at 20:39
If you check the JSFiddle, you can see that the 'obtrusive' method is using javascript on the actual element, as in, onKeyUp, which is considered bad and obtrusive. Targeting elements with JavaScript via id/class is unobstrusive and doesn't lay inline on markup. — , Mar 13 '13 at 20:40
@WaleedKhan http://en.wikipedia.org/wiki/Unobtrusive_JavaScript — Matt Ball, Mar 13 '13 at 20:41
How you would run the function with just javascript, using (perhaps an event listener), to target the element and do something like: object.onkeyup=function(){}; — , Mar 13 '13 at 20:42

score 1 · Answer 1 · answered Mar 13 '13 at 20:54

Not too hard. You don't even need jQuery.

http://jsfiddle.net/pxmmh/4/

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

// bind event handlers to the DOM
var field = document.getElementById('limited');
field.onkeydown = function() {
    var counter = document.getElementById('limited-count');
    var limit = parseInt(field.dataset.limit, 10)
    limitText(field, counter, limit);
};

The field and the counter have been given id's, allowing us to find them. And the limit is now a data-* HTML5 property we can access with the .dataset property in JavaScript, which allows the element to say what's it's own limit is.

Thanks Alex, it might be a good idea to use getAttribute instead of dataset method for better browser compatibility, but thank you for your solution! :) I've updated here that you can see should you wish - http://jsfiddle.net/pxmmh/5/ — , Mar 13 '13 at 21:04

score 0 · Answer 2 · answered Mar 13 '13 at 20:40

0

In this case, it's not terribly obtrusive; if JS is off, nothing significant is broken. What you'd want to do, though, is attach the events in an onload, and have the paragraph that says "You have X chars left", either hidden or absent by default. Have that same onload either unhide or add it, since it'll only be useful if the JS runs anyway.

answered Mar 13 '13 at 20:40

cHao

84,970
20
145
172

What I meant was separating the javascript form the HTML. As in using something like: object.onkeyup=function(){}; – Mar 13 '13 at 20:45
I am not sure how to convert the function to be able to use 'unobtrusively' :) sorry. I don't know how you'd set it up inside the script tag. – Mar 13 '13 at 20:46
The function can already be used unobtrusively. `element.addEventListener('keyup', function() { limitText(this, countdownField, 15); });` would be ideal, but assigning to `element.onkeyup` would work in a pinch. – cHao Mar 13 '13 at 20:49

score 0 · Accepted Answer · answered Mar 13 '13 at 20:45

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/

Thanks David. I will drop your jQuery usage though and have done this: http://jsfiddle.net/VxVzj/1/ — , Mar 13 '13 at 20:50
@Toddo That's perfectly acceptable. I prefer using jQuery since it allows me to scale my apps more easily but that's a great implementation. Hopefully my answer pointed you in the correct direction — David L, Mar 13 '13 at 20:54

Turning obtrusive JavaScript to unobtrusive

3 Answers3