JSFiddle - React, Tailwind, and code Playground

by Khalil Zhang

HTML

limit: 1 <input type="text" class="limited-length-input" max-length="1" />
limit: 3 <input type="text" class="limited-length-input" max-length="3" />

JavaScript

Array.prototype.forEach.call(document.getElementsByClassName('limited-length-input'), function (ele) {
    var maxLength = ~~ele.getAttribute('max-length');
    var borderColor = ele.style.borderColor;

    on(ele, 'keyup', function (event) {
        var v = ele.value; // 'this' is not this if using attachEvent
        var resetBorderColor = borderColor;

        if (v.length > maxLength) {
            resetBorderColor = 'red'
        }

        this.style.borderColor = resetBorderColor;
    });
});

function on(element, eventType, eventHandler) {
    if (element.addEventListener) {
        element.addEventListener(eventType, eventHandler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventType, eventHandler);
    }
}