Lorsqu'une exigence client impose de limiter un textarea à 100 caractères, voici différentes techniques à explorer. Chaque méthode présente des nuances de cmopatibilité et d'implémentation.

Solution 1 : Attribut maxlength natif

L'attribut maxlength en HTML permet une restriction simple.

<textarea maxlength="15"></textarea>

Solution 2 : Intercepteur d'événements clavier

Utilisation de JavaScript pour contrôler la longueur via un gestionnaire d'événement.

<textarea name="commentBox" cols="40" rows="3" onkeydown="return checkLength(this, 18)"></textarea>
<script>
function checkLength(field, limit) {
    if (field.value.length >= limit) {
        return false;
    }
    return true;
}
</script>

Solution 3 : Approche hybride maxlength et JavaScript

Combiner maxlength et un gestionnaire JavaScript pour élargir la compatibilité.

<textarea name="feedback" cols="50" rows="4" maxlength="25" onkeydown="return enforceLimit(this, 25)"></textarea>
<script>
function enforceLimit(elem, max) {
    if (elem.value.length >= max) {
        event.returnValue = false;
    }
    return true;
}
</script>

Solution 4 : Tronacture avec onkeyup

Couper le texte excédentaire après la saisie via un événement clavier.

<textarea name="bio" cols="45" rows="6" onkeyup="truncateContent(this, 22)"></textarea>
<script>
function truncateContent(textarea, maxLength) {
    if (textarea.value.length > maxLength) {
        textarea.value = textarea.value.substring(0, maxLength);
    }
}
</script>

Solution 5 : Gestion avancée des événements

Une implémentation complète couvrant la saisie, le collage et le presse-papiers pour une compatibilité étendue.

<textarea id="messageArea" maxlength="30" oninput="handleInput(this)" onpaste="handlePaste(this)" onkeypress="return handleKeyPress(this)"></textarea>
<script>
function handleInput(field) {
    var limit = parseInt(field.getAttribute("maxlength"));
    if (field.value.length > limit) {
        field.value = field.value.substring(0, limit);
    }
    return false;
}

function handlePaste(field) {
    var limit = parseInt(field.getAttribute("maxlength"));
    var pasteData = (event.clipboardData || window.clipboardData).getData("text");
    var currentLength = field.value.length;
    if (currentLength + pasteData.length > limit) {
        var allowedPaste = pasteData.substring(0, limit - currentLength);
        field.value += allowedPaste;
        event.preventDefault();
    }
    return false;
}

function handleKeyPress(field) {
    var limit = parseInt(field.getAttribute("maxlength"));
    if (field.value.length >= limit) {
        var selectedText = getSelectedText(field);
        if (selectedText.length === 0) {
            return false;
        }
    }
    return true;
}

function getSelectedText(field) {
    if (field.selectionStart !== undefined) {
        return field.value.substring(field.selectionStart, field.selectionEnd);
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return "";
}
</script>