Lignes Max textarea

J'ai trouvé des scripts qui limite l'utilisation des lignes dans un textarea comme ceci:

 $(document).ready(function(){

        var lines = 10;
        var linesUsed = $('#linesUsed');
        var newLines=0;

        $('#rev').keydown(function(e) {

            newLines = $(this).val().split("\n").length;
            linesUsed.text(newLines);

            if(e.keyCode == 13 && newLines >= lines) {
                linesUsed.css('color', 'red');
                return false;
            }
            else {
                linesUsed.css('color', '');
            } 
        });

Cela fonctionne bien lorsque vous appuyez sur entrée et la limite à 10 .Mais le problème se produit lorsque vous tapez des phrases qui sont si longues qu'elles passent automatiquement à une nouvelle ligne, sans les \n et lorsque vous les copiez coller d'un texte, alors il ne parvient pas à limiter l'utilisation des lignes.

personne ne sait comment résoudre ce problème.

Important: la solution doit travailler pour un textarea

avez-vous essayé de calculer le line-height à la place?
J'ai essayé quelque chose, avoir un coup d'oeil à ma réponse...
que voulez-vous faire lorsque vous collez du texte, voulez-vous le texte de couper tout ce qui va au-delà de la limite...?
ok, j'ai mis à jour ma réponse, check it out! Et n'oubliez pas l'accepter comme une réponse correcte (grosse coche en dessous des boutons de vote), si vous pensez que c'est l'un! 😉
pas sûr que vous en pensez, mais je n'ai rien trouvé la résolution de ce avec un textarea en particulier, même si je suis généralement assez bon à la recherche... des raisons pour lesquelles vous absolument besoin d'utiliser un textarea?

OriginalL'auteur iCode4U | 2014-03-29

javascript textarea

Vous pouvez essayer de le faire à l'aide de cette logique:

JS :

var limit = 3; //<---max no of lines you want in textarea
var textarea = document.getElementById("splitLines");
var spaces = textarea.getAttribute("cols");

textarea.onkeyup = function() {
   var lines = textarea.value.split("\n");

   for (var i = 0; i < lines.length; i++) 
   {
         if (lines[i].length <= spaces) continue;
         var j = 0;

        var space = spaces;

        while (j++ <= spaces) 
        {
           if (lines[i].charAt(j) === " ") space = j;  
        }
    lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "");
    lines[i] = lines[i].substring(0, space);
  }
    if(lines.length>limit)
    {
        textarea.style.color = 'red';
        setTimeout(function(){
            textarea.style.color = '';
        },500);
    }    
   textarea.value = lines.slice(0, limit).join("\n");
};

Ici est la mise à JOUR de la DÉMO

malheureusement, ce n'est pas toujours travailler avec de longs mots ou un texte collé...
Il ne l'est aujourd'hui, mis à jour à répondre 🙂
Je vois que vous êtes "artificiellement" l'application d'un saut de ligne à la textarea, mais ce sera difficile à gérer avec des polices différentes... c'est pas une mauvaise solution si, je dois l'admettre.
iCode4U: Cheers mate 🙂
Est-il de toute façon de faire de sorte qu'il atteindra la fin de la zone de texte?

OriginalL'auteur Aditya

Bien, je ne pouvais pas comprendre comment calculer la hauteur de seulement le texte à l'intérieur d'un textarea, j'ai donc utilisé une contenteditable div à la place. J'espère que vous aimez cette solution.

HTML

<div id="container">
    <div id="rev" contenteditable="true"></div>
</div>

CSS

#container {
    height:100px;
    width:300px;
    cursor:text;
    border:1px solid #000
}
#rev {
    line-height:20px;
    outline:none
}

$(document).ready(function () {
    $('#container').click(function() {
        $('#rev').focus();
    });

    var limit = 3;
    var lineHeight = parseInt($('#rev').css('line-height'));

    $('#rev').keydown(function (e) {
    var totalHeight = parseInt($('#rev').height());
    var linesUsed = totalHeight / lineHeight;

        if (e.keyCode == 13 && linesUsed >= limit) {
            $('#rev').css('color', 'red');
            return false;
        } else {
            $('#rev').css('color', '');
        }
    });
});

VOICI UNE DÉMO, VOUS POUVEZ JOUER AVEC

MAJEUR MODIFIER

La suite de l'OP soulignant j'ai effectivement oublié de le adresse le plus important, j'ai mis à jour mon code. En gros, j'ai supprimé la case pour la touche d'entrée et permis de delete et backspace dans le cas où le texte va au-dessus de la limite comme suit. Vous pourriez avoir à bidouiller un peu pour l'adapter exactement à vos besoins.

$(document).ready(function () {
    $('#container').click(function() {
        $('#rev').focus();
    });

    var limit = 3;
    var lineHeight = parseInt($('#rev').css('line-height'));

    $('#rev').keydown(function (e) {
    var totalHeight = parseInt($('#rev').height());
    var linesUsed = totalHeight / lineHeight;

        if (linesUsed > limit) { //I removed 'e.keyCode == 13 &&' from here
            $('#rev').css('color', 'red');
            if (e.keyCode != 8 && e.keyCode != 46) return false; //I added this check
        } else {
            $('#rev').css('color', '');
        }
    });    

    //I added the following lines
    $('#rev').on('paste', function () { 
        if (linesUsed > limit) {
            $('#rev').css('color', 'red');
            if (e.keyCode != 8 && e.keyCode != 46) return false;
        } else {
            $('#rev').css('color', '');
        }
    });
});

MISE À JOUR DE LA DÉMO ICI

Merci pour l'effort, mais cela ne marche pas à résoudre les problèmes, j'ai toujours cann copier coller et il l'habitude de travailler pendant de longues phrases.
vrai que... j'ai peut donner une autre chance plus tard...
heureux je pourrais aider à vous obtenir sur la bonne voie... 😉
l'homme désolé mais c'est difficile à mettre en œuvre dans un textarea
J'ai fait quelques tests supplémentaires et de la recherche, mais il n'y a tout simplement pas de solution j'ai pu trouver qui permettrait de calculer avec précision la taille ou le nombre de lignes dans un textarea...

OriginalL'auteur webeno

2

C'est trop de travail pour essayer de comprendre combien de lignes sur la base du nombre de caractères dans chaque ligne et le textarea de la largeur (le textarea ont d'emballage ou non? taille de la police, et une lettre largeurs, espaces, etc...). Le plus simple est d'avoir deux textareas (l'un visible et un pas de hauteur définie à 0) avec la même largeur et de styles de police et de vérifier la hauteur de défilement de l'invisible textarea.

Voici un exemple http://jsfiddle.net/SKYt4/1/

HTML
```
<textarea id="visible_textarea"></textarea>
<textarea id="hidden_textarea"></textarea> 
<div id="used_lines"></div>
```
CSS
```
textarea {line-height:16px; /* line height to calculate number of lines */
    width:150px; /* need to match width */}
#hidden_textarea {height:0px;
    padding:0px;
    border:none;
    margin:0px;
    opacity:0;}
```
JavaScript
```
$('#visible_textarea').keyup(function(){
    $('#hidden_textarea').val(this.value);
    //checking how many lines
    var lns = Math.ceil(document.getElementById('hidden_textarea').scrollHeight / parseInt($('#hidden_textarea').css('line-height')));

    if (lns > 10) {
         $('#used_lines').css('color', '#ff0000');
    }
    else {
        $('#used_lines').css('color', '');
    }

    $('#used_lines').html(lns+' lines');
});


$('#visible_textarea').change(function(){
    $(this).keyup();
});
```
1. pourquoi avez-vous besoin d'un caché textarea pour calculer la hauteur? 2. vous n'avez pas une solution pour prévenir la poursuite de la saisie. 3. vous êtes actuellement en permettant le redimensionnement de la zone de texte qui va casser ce code...
La façon dont ce script fonctionne en divisant le défilement de la hauteur de l'caché textarea sur la hauteur de la ligne. Depuis le défilement de la hauteur minimum de la valeur est l'élément de la hauteur, nous avons à régler la hauteur à 0 pour obtenir une précision de défilement de la hauteur. Pour arrêter de taper, vous pouvez ajouter un événement keydown qui vérifie le nombre de lignes et de prévenir l'utilisateur pour plus de la saisie. Vous pouvez arrêter de les redimensionner en fonction de la définition de la règle css resize: none;
je sais exactement comment je le ferais, mais l'explication à cela est manquant dans votre réponse, sauf pour le "pourquoi le caché textarea" - que l'on était pour satisfaire ma curiosité... 😉
Problème: Sur certains navigateurs (Chrome est là que je l'ai remarqué), .css('line-height') renvoie une non-valeur int comme normal. Solution: mettre quelque chose que vous savez sera une ligne haute, et obtenir la hauteur: $('#hidden_textarea').val("A"); var text_height = document.getElementById('hidden_textarea').scrollHeight; Ensuite, vous pouvez diviser par text_height pour obtenir le nombre de lignes.
Aussi, la zone de texte caché obtient une barre de défilement qui provoque un retour à la ligne à un endroit un peu différent que le visible zone de texte. Ajouter overflow-y: hidden; à la #hidden_textbox CSS pour corriger.

OriginalL'auteur NoGray

Vous devez vous connecter pour publier un commentaire.