JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<textarea id="myTextbox" maxlength="140" rows="4" cols="35"></textarea>
<div id="count">0</div>
<div id="alert" class="hidden">At max chars!</div>
<div id="newline" class="hidden">Newline prevented as it is 2 characters!</div>

CSS

.hidden {
    visibility: hidden;
}

JavaScript

var myTextBox = document.getElementById('myTextbox'),
    count = document.getElementById('count'),
    alert = document.getElementById('alert'),
    newline = document.getElementById('newline'),
    maxLength = 140;

myTextBox.addEventListener('input', function (e) {
    var value = e.target.value.replace(/\r?\n/g, '\r\n'),
        length = value.length;
    
    
    if (length >= maxLength) {
        if (length > maxLength) {
            length = maxLength - 1;
            e.target.value = value.slice(0, length);
            newline.classList.remove('hidden');
        } else {
            alert.classList.remove('hidden');
            newline.classList.add('hidden');
        }
    } else {
        alert.classList.add('hidden');
        newline.classList.add('hidden');
    }
        
    count.textContent = length;
}, false);