JSFiddle - React, Tailwind, and code Playground

by Chris Rebert

HTML

<input id="a" type="text" maxlength="5" />
<button type="button" id="a-btn">tooLong?</button><br />
<button type="button" id="force-a">Force too long (you should backspace once afterwards)</button>
<hr />
<textarea id="b" maxlength="5"></textarea>
<button type="button" id="b-btn">tooLong?</button><br />
<button type="button" id="force-b">Force too long (you should backspace once afterwards)</button>

JavaScript

var a = document.getElementById('a');
var b = document.getElementById('b');
var aBtn = document.getElementById('a-btn');
var bBtn = document.getElementById('b-btn');
var forceA = document.getElementById('force-a');
var forceB = document.getElementById('force-b');

aBtn.onclick = function () {
    alert(a.validity && a.validity.tooLong);
};
bBtn.onclick = function () {
    alert(b.validity && b.validity.tooLong);
};

forceA.onclick = function () {
    a.value = "123456789";
};
forceB.onclick = function () {
    b.value = "123456789";
};