Limiter le nombre de lignes dans le textarea et Affichage du nombre de lignes à l'aide de jQuery

À l'aide de jQuery, je voudrais:

  • Limiter le nombre de lignes qu'un utilisateur peut entrer dans un textarea pour un nombre défini
  • Ont une ligne de compteur apparaît que les mises à jour nombre de lignes comme les lignes sont entrés
  • Touche retour ou /n correspond à la ligne

Bravo à tous ceux qui peuvent aider!

$(document).ready(function(){
  $('#countMe').keydown(function(event) {
    //If number of lines is > X (specified by me) return false
    //Count number of lines/update as user enters them turn red if over limit.

  });   
});


<form class="lineCount">
  <textarea id="countMe" cols="30" rows="5"></textarea><br>
  <input type="submit" value="Test Me">
</form>

<div class="theCount">Lines used = X (updates as lines entered)<div>

Pour cet exemple permet de dire limiter le nombre de lignes autorisé à 10.

Merci à tous!

InformationsquelleAutor chainwork | 2011-06-28
  1. 46

    html:

    <textarea id="countMe" cols="30" rows="5"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span><div>

    js:

    $(document).ready(function(){

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

    $('#countMe').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', '');
        }
    });
});

    violon:
    http://jsfiddle.net/XNCkH/17/

    • Samuel Liew, merci beaucoup! Je suis sûr que ce sera utile à beaucoup de gens.
    • Le return false ne semble pas fonctionner quand je l'ai coller dans un grand nombre de lignes. Est-il possible que ce qui peut être modifié afin d'assurer un utilisateur ne peut pas envoyer le formulaire si le nombre de lignes a été dépassée?
    • Vous pouvez utiliser le "copier-coller" de l'événement sur la zone de texte
    • Est-il de toute façon à convertir ce pour un "clic") méthode?
    InformationsquelleAutor Samuel Liew
  2. 1

    Est peu à l'amélioration du code. Dans l'exemple précédent, vous pourriez coller le texte avec plus de lignes que vous le souhaitez.

    HTML

    <textarea data-max="10"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span></div>

    JS

    jQuery('document').on('keyup change', 'textarea', function(e){

        var maxLines = jQuery(this).attr('data-max');        
        newLines = $(this).val().split("\n").length;

        console.log($(this).val().split("\n"));

        if(newLines >= maxLines) {
            lines = $(this).val().split("\n").slice(0, maxLines);
            var newValue = lines.join("\n");
            $(this).val(newValue);
            $("#linesUsed").html(newLines);
            return false;
        }

    });
    • Dans la section HTML de la clôture de la div n'est pas fermé.
    InformationsquelleAutor Antonio Novak
  3. 0

    Une bien moche , mais en quelque sorte de travail exemple
    spécifier les lignes de textarea

    <textarea rows="3"></textarea>

    et puis
    en js

       $("textarea").on('keydown keypress keyup',function(e){
       if(e.keyCode == 8 || e.keyCode == 46){
           return true;
       }
       var maxRowCount = $(this).attr("rows") || 2;
        var lineCount = $(this).val().split('\n').length;
        if(e.keyCode == 13){
            if(lineCount == maxRowCount){
                return false;
            }
        }
        var jsElement = $(this)[0];
        if(jsElement.clientHeight < jsElement.scrollHeight){
            var text = $(this).val();
            text= text.slice(0, -1);
            $(this).val(text);
            return false;
        }

    });
    InformationsquelleAutor Alexandr Sargsyan