Comment limiter le nombre de caractères par ligne dans la zone de texte à une valeur fixe

Vous pouvez appeler cela sur le formulaire Soumettre (Onsubmit) ou sur la frappe de Textfield ou quoi que ce soit xxx

édition: ceci est JavaScript. Bien sûr, vous voudrez également valider le côté serveur.

Je vérifierais chaque fois que la longueur de la ligne actuelle est, puis insérez une pause à l'espace précédent le plus proche lorsqu'il dépasse 72. La difficulté si l'utilisateur pâte dans un bloc de texte; Ensuite, vous devez vérifier toutes les longueurs de ligne entre la position précédente du curseur et le nouveau, qui est une douleur. Vous voudriez stocker la dernière position du curseur chaque fois qu'il y a une touche de frappe et surveille un saut.

Il y a du code pour obtenir et définir la position du curseur ici .

duplicata de Textarea Limit caractères par ligne JQuery ou JavaScript XXX

J'ai eu le même problème et j'ai essayé de le résoudre avec JavaScript. Pourquoi ne pas simplement prendre le code HTML suggéré par Juan Mendes?

Eh bien, c'est assez simple: il ne fonctionne pas vraiment le navigateur croisé, ni du moins avec Firefox 25 sous Ubuntu, le nombre maximum de caractères par ligne semble être Limité par la largeur de Texarea et en fonction de la taille de la police, je pouvais entrer + -1 lettre. Mais je voulais que le nombre de caractères par ligne limite à une valeur spécifique, quelle que soit la largeur de la Textarea. Donc, je suis venu avec ce code: xxx

J'ai également préparé un jsfiddle . J'espère que cela aide quelqu'un :)

et à la fin juste une courte explication de la façon dont ce code fonctionne:

• La fonction attend l'un des événements suivants: entrée, mise au point, clé, porte-clés (il peut sembler un peu inutile d'utiliser ces nombreux événements, mais j'ai eu beaucoup testé pour trouver cette combinaison qui traverse le traverseuse et toujours incendies, peu importe Si seulement des lettres simples sont entrées, la touche est continuellement enfoncée ou que le texte est collé dans le Textarea)
• Il reçoit la valeur du Texarea
• Puis il divise la textarea à chaque linebreak dans un nouvel élément de tableau
• La boucle pour la boucle de cette matrice et vérifie toutes les lignes respectivement élément du tableau, s'il dépasse le maximum de la maxlength
• Si une ligne dépasse la maxlength, la ligne est "coupée" après maxlength caractères
• à la fin, quand il n'y a pas de ligne gauche, ce qui est plus long que les caractères maxlength, les éléments de tableau sont joints ensemble dans une chaîne à nouveau

  Edit: La seule contrainte que j'ai découvert maintenant, est-ce que, lors de la saisie d'un caractère supplémentaire au début ou au sein de la ligne, le code "coupe" la chaîne à la fin et non où les personnages ont été ajoutée. Cela n'aura pas d'importance dans la plupart des cas, mais gardez-le juste à l'esprit :) Quoi qu'il en soit, il ne devrait pas être trop difficile de changer cette fonction de manière appropriée, mais dans la plupart des cas, il s'agira de gaspillage de ressources;)

Essayez ceci pour le côté serveur additionnellement. Vous pouvez le faire dans n'importe quelle langue. Pas seulement PHP.

if (strlen($textareaContent) <= 72) {
    // Save textareaContent
}
else {
    echo "Your text is longer than 72 characters.";
}

Vérifiez ceci:

var t=document.getElementById('textAreaId').value;
if(/^(?:[^\n]{0,73}\n)*$/g.test(t) !== true){
alert('input is invalid');
}

Un petit ajout pour compléter une solution précédente.
Je limite également le nombre de lignes. Il me sert dans des systèmes anciens où un commentaire de 4 lignes est enregistré dans 4 entrées de base de données. P>

<textarea id="mytext" rows = "4" style="width:300px"></textarea>

$(function() {

    var maxLength = 30;
    var mawRow = 4;

    $('#mytext').on('input focus keydown keyup', function() {

        //get Textearea text
        var text = $(this).val();

        //Split with \n carriage return
        var lines = text.split("\n"); 

        for (var i = 0; i < lines.length; i++) {
            if (lines[i].length > maxLength) {
                lines[i] = lines[i].substring(0, maxLength);
            }     
        }

        //On supprime ce qui dépasse... :)
        while (lines.length > 4){    
            lines.pop();
        }

        //Join with \n.
        //Set textarea
        $(this).val(lines.join("\n"));
    });
});

Voici un moyen de limiter une textaree dans les deux caractères par ligne et la quantité de lignes. Pour rendre également l'interaction d'entrée se sentir intuitive à un utilisateur, il doit gérer (1) la valeur de l'entrée forte> et (2) la position du curseur fort>:

1. (a) la valeur de lecture du textarea, (b) détecter si le texte par ligne est trop long, si nécessaire les restrictions de longueur, (c) poussez le texte débordant d'une ligne à la ligne suivante et (d) de la valeur d'écriture. au Textarea. Li>
2. (a) Lisez la position du curseur pour stocker la position du curseur, et (B) Positionnez le curseur dans lequel un utilisateur s'attendrait à celui-ci après la rédaction de données. LI> OL>

   Vérifiez le Codepen ici: https://codepen.io/mattwritingcode/pen/bmexwa P>

   Ceci est le code JavaScript essentiel (testé sur Safari et Chrome, cela fonctionne également bien lorsque vous collez du texte dans Textarea): P>

   var charactersPerLine=document.getElementById("charactersPerLine").value;
   var maxLines=document.getElementById("maxLines").value;
   var textOutput="";
   var onPaste=false;
   
   function formatTextAsRequired() {
     /*
     This function handles two aspects:
     1. (a) READ VALUE from the textarea, (b) DETECT IF TEXT PER LINE IS TOO LONG  as required by the length restrictions, (c) PUSH OVERFLOWING TEXT from a line to the next line and (d) WRITE VALUE back to the textarea.
     2. (a) READ THE CURSOR POSITION to store the cursor position, and (b) POSITION THE CURSOR where a user would expect it after WRITE DATA.
     */
     var textInput=document.getElementById("flexibleInputField").value;//1a: READ VALUE
     var inputAsRows=textInput.split("\n");// create array from input => each element contains one row of the textarea
     var inputAsOneLine=textInput.replace(/(\r\n\t|\n|\r\t)/gm,"");//remove all line-breaks
     var cursorPositionOnInput=document.getElementById("flexibleInputField").selectionStart;//2a: READ CURSOR POSITION
     var cursorOffsetAfterOutput=0;//set default value for cursor offset. cursor offset is needed when re-posiotioning the cursor after WRITE DATA
   
     var totalRows=inputAsRows.length; //don't put inputAsRows.length in the for statement, as the array is growing in the loop which results in an infinite loop
     var row;
     var lineBreakCount=0;
     var characterCount=0;
     for (row = 0; row < totalRows; ++row) {
       if(inputAsRows[row].length>charactersPerLine){ //1b DETECT IF TEXT PER LINE IS TOO LONG 
         if (inputAsRows[row+1] === undefined) {
           inputAsRows[row+1]="";// the row did not exist
           totalRows++;
           }
         //1c PUSH OVERFLOWING TEXT: move text that is too long for this row to the next row:
         inputAsRows[row+1]=inputAsRows[row].substring(charactersPerLine)+inputAsRows[row+1];
         inputAsRows[row]=inputAsRows[row].substring(0,charactersPerLine);
         //determine, if cursor was at the end of the line that got a line-break:
         var newOutput=inputAsRows.join("\n");
         if(newOutput.substr(cursorPositionOnInput-1,1)=="\n"){
           cursorOffsetAfterOutput=1; }
         }
       }
   
     if(inputAsRows.length<=maxLines && inputAsOneLine.length<=(maxLines*charactersPerLine)){//data is within max number of rows and max total digits
       textOutput=inputAsRows.join("\n");
       document.getElementById("flexibleInputField").rows=inputAsRows.length;//resize textarea
       document.getElementById("errors").innerHTML="";//remove error message
       document.getElementById("count").innerHTML=inputAsOneLine.length+"/"+(maxLines*charactersPerLine);//show digits count
       if(onPaste){ cursorOffsetAfterOutput=cursorOffsetOnPaste(textInput,cursorPositionOnInput,totalRows)
         }
       }
       else //data would be too long 
       {
       document.getElementById("errors").innerHTML="This field can only have "+maxLines+" lines with "+charactersPerLine+" characters per line.";//display error message
       document.getElementById("count").innerHTML="";//remove digits count
       cursorOffsetAfterOutput=-1;
     }
     document.getElementById("flexibleInputField").value=textOutput;//1d: WRITE VALUE
     document.getElementById("flexibleInputField").selectionStart=cursorPositionOnInput+cursorOffsetAfterOutput; //2b: POSITION CURSOR
     document.getElementById("flexibleInputField").selectionEnd=cursorPositionOnInput+cursorOffsetAfterOutput; //set a single cursor, not a selection
     onPaste=false;
   }
   
   function countLineBreaks(string,lengthFromStart){
     var left=string.substr(0,lengthFromStart);
     var countOfLinebreaks=(left.split("\n")).length;
     return countOfLinebreaks;
   }
   
   function handlePaste(){
     //some improvements when pasting content can still be made (particularly on the cursor position)
     onPaste=true;
   }
   
   function cursorOffsetOnPaste(textInput,cursorPositionOnInput,totalRows){
     //offset the cursor by 1 for each added line break:
     var countOld=countLineBreaks(textInput,cursorPositionOnInput);  
     var countNew=countLineBreaks(textOutput,cursorPositionOnInput+totalRows);
     cursorOffsetAfterOutput=countNew-countOld;
     return cursorOffsetAfterOutput;
   }
   

Ceci est un vieux fil mais je viens de développer une solution de plug-in jquyery. Vérifiez-le ici . Trouvez le README pour plus de détails. Mon plugin en a un peu plus, mais les basiques sont les suivantes:

p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea class="line_control" lines="2" chars="8" style="resize: none;"></textarea>

Il suffit de se développer sur une réponse existante de Katze_sonne pour répondre aux besoins de multiples textaes qui auraient besoin d'une limite de caractères par ligne.

html: p> xxx pre>

le Idée ici serait que vous définissez votre longueur maximale dans le Data-Row-maxlength CODE> et votre JavaScript cible tout élément où le Data-Limit-Row-len = "vrai" code> P>

JavaScript: P>

$("textarea[data-limit-row-len=true]").on("input focus keydown keyup", function (event) {
    var maxlength = $(this).data("row-maxlength");

    var text = $(this).val();
    var lines = text.split(/(\r\n|\n|\r)/gm); 
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > maxlength) {
            lines[i] = lines[i].substring(0, maxlength);
        }
    }
    $(this).val(lines.join(''));
});

Essayez ceci.

p>

    <textarea name="limit" id="limit" cols="30" rows="10"></textarea>
    <script>
      const text = document.querySelector('#limit');
      const CHAR_LIMIT_PER_LINE = 5;
      const LINES_LIMIT = 6;

      text.addEventListener('keyup', (e) => {
        const lines = e.target.value.split('\n');
        for (let i = 0; i < lines.length; i++) {
          if (lines[i].length < CHAR_LIMIT_PER_LINE) continue;
          lines[i] = lines[i].substring(0, CHAR_LIMIT_PER_LINE);
          lines[i + 1] = `${lines[i].substring(CHAR_LIMIT_PER_LINE + 1)}${lines[i + 1] || ''}`;
        }
        text.value = lines.slice(0, LINES_LIMIT).join('\n');
      });
    </script>