JSFiddle - React, Tailwind, and code Playground

by maldy

HTML

<label>Input Text One Without Id</label>
<input type="text" name="one" maxlength="1"
/>
<label>Input Text two</label>
<input type="text" name="two" id="two" maxlength="2"
/>
<label>Input Text three</label>
<input type="text" name="three" id="three" maxlength="3"
/>
<label>Input Text four</label>
<input type="text" name="four" id="four" maxlength="4"
/>
<label>Input Text five</label>
<input type="text" name="five" id="five" maxlength="5"
/>
<label>Input Text six</label>
<input type="text" name="six" id="six" maxlength="6"
/>
<label>Input Text seven</label>
<input type="text" name="seven" id="seven" maxlength="7"
/>
<label>Input Text eight</label>
<input type="text" name="eight" id="eight" maxlength="8"
/>
<label>Input Text nine</label>
<input type="text" name="nine" id="nine" maxlength="9"
/>
<label>Input Text ten</label>
<input type="text" name="ten" id="ten" maxlength="10"
/>
<label>TextArea Onet Without maxlength</label>
<textarea name="onet" id="onet"></textarea>
<label>TextArea twot</label>
<textarea name="twot" id="twot" maxlength="2"></textarea>
<label>TextArea threet</label>
<textarea name="threet" id="threet" maxlength="3"></textarea>
<label>TextArea fourt</label>
<textarea name="fourt" id="fourt" maxlength="4"></textarea>
<label>TextArea fivet</label>
<textarea name="fivet" id="fivet" maxlength="5"></textarea>
<label>TextArea sixt</label>
<textarea name="sixt" id="sixt" maxlength="6"></textarea>
<label>TextArea sevent</label>
<textarea name="sevent" id="sevent" maxlength="7"></textarea>
<label>TextArea eightt</label>
<textarea name="eightt" id="eightt" maxlength="8"></textarea>
<label>TextArea ninet</label>
<textarea name="ninet" id="ninet" maxlength="9"></textarea>
<label>TextArea tent</label>
<textarea name="tent" id="tent" maxlength="10"></textarea>

CSS

label{
display:block;
margin-top: 10px;
}

JavaScript

var idMaxLengthMap = {};

$(document).ready(function() {
    $.each($(':text, textarea'), function() {
        var id = $(this).attr('id'),
            maxlength = $(this).attr('maxlength');

        if ((typeof id !== 'undefined') && (typeof maxlength !== 'undefined')) {
            idMaxLengthMap[id] = maxlength;
            $(this).removeAttr('maxlength');
        }
    });

    $(':text, textarea').bind('change keyup', function() {
        var id = $(this).attr('id'),
            maxlength = '';
        if ((typeof id !== 'undefined') && idMaxLengthMap.hasOwnProperty(id)) {
            maxlength = idMaxLengthMap[id];
            if ($(this).val().length > maxlength) {
                $(this).val($(this).val().slice(0, maxlength));
            }
        }
    });
});