Définir le caractère max (si la visibilité le permet) dans la zone de texte multiligne

Question

Est-il possible d'avoir une zone de texte multiligne (im using asp.net C#) où le maximum de caractères ne peut pas dépasser la taille du champ de texte visible? J'ai enlevé les barres de défilement verticalement (débordement: caché).

Maintenant, je le veux pour dire que si la zone de texte multiligne indique 100px hauteur (ou dire 5 lignes), l'utilisateur ne peut taper plus que la hauteur de la zone de texte?

Il doit y avoir un bidouillage JS/JQuery pour cela?

Answer 1

Non, ce n'est pas possible. Parce que la zone de texte ASP.NET se transforme finalement en zone de texte HTML qui ne prend pas en charge la limite de texte.

Vous pouvez faire cette astuce avec JavaScript, bien sûr, mais ce qui concerne la zone visible, il peut ne pas être si facile. Vous devrez d'une manière ou d'une autre calculer les métriques de la police courante utilisée, puis essayer de rendre en mémoire pour voir si les limites de la boîte sont dépassées. On pourrait de telles astuces lors de la programmation pour Windows, mais avec des pages Web, ce n'est probablement pas possible.

Answer 2

Bien qu'il se transforme finalement en une zone de texte, vous pourriez le faire, mais il est hacky. Avec JQuery sur textarea keypress, vérifiez la longueur de la valeur, si elle est supérieure à votre seuil, supprimez le dernier caractère.

Comme je l'ai dit hacky.

Bonne chance,

Dan

Answer 3

Vous pouvez limiter le texte max. char comme suit.

côté client

function ValidateLength() 
{ 
    if(document.forms[0].txtFlightRemarks.value.length > MAX_LENGTH)  
    {   
     document.forms[0].txtFlightRemarks.value = document.forms[0].txtFlightRemarks.value.substring(0,MAX_LENGTH); 
     document.forms[0].txtFlightRemarks.focus(); 
     return false; 
    }  
} 

côté serveur (Page_Load): joindre onchange et onkeyup événements à textarea nécessaires.

txtFlightRemarks.Attributes.Add("onchange", "ValidateLength();"); 
txtFlightRemarks.Attributes.Add("onKeyUp", "ValidateLength();");