web-dev-qa-db-fra.com

Max caractères dans textarea avec jquery

J'ai le code suivant, et je suis un peu coincé sur ce qu'il faut faire ensuite. L'idée est que lorsque vous entrez du texte dans une zone de texte, un compteur vous indique le nombre de caractères qu'il vous reste. Une fois que vous avez atteint le maximum de caractères, je ne peux plus autoriser la saisie de caractères ni supprimer tous les caractères entrés de manière à ce que la zone de texte ne contienne que 10 caractères. Je sais que je dois mettre le code où il est écrit alert("LONG"); mais je ne sais pas trop quoi.

var maxLen = 10;
        console.log("Start");
        $('#send-txt').keyup(function(){
            var Length = $("#send-txt").val().length;
            var AmountLeft = maxLen - Length;
            $('#txt-length-left').html(AmountLeft);
            if(Length >= maxLen){
                alert("LONG");
            }



        });
javascriptjqueryvalidationtextarea
23
Bill

Ici ça va. Tout ce qui dépasse la limite de caractères sera supprimé. 

$('textarea').keypress(function(e) {
    var tval = $('textarea').val(),
        tlength = tval.length,
        set = 10,
        remain = parseInt(set - tlength);
    $('p').text(remain);
    if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
        $('textarea').val((tval).substring(0, tlength - 1));
        return false;
    }
})

Consultez l'exemple de travail sur http://jsfiddle.net/JCehq/1/

25
Hussein

Toutes ces réponses sont un peu étranges dans la mesure où ils essaient de faire un peu trop. Une manière plus simple et plus agréable visuellement (car il montre que le texte est rapidement coupé) - et avec moins de bizarreries que l'exemple précédent (remarquez comment il écrase la touche finale?) - consiste simplement à couper le nombre de caractères sur keyUp au nombre qui est permis.

        var textlimit = 400;

        $('textarea').keyup(function() {
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, textlimit));
            var tlength = $(this).val().length;
            remain = textlimit - parseInt(tlength);
            $('#remain').text(remain);
         });

Notez que cela fonctionne également pour le collage dans le texte, contrairement à certains exemples ci-dessus.

Exemple ici: http://jsfiddle.net/PzESw/5/

36
daprezjer

Renvoyer false et utiliser .keypress () au lieu de .keyup () interrompt la saisie une fois la longueur atteinte. Voici l'exemple dans un jsFiddle:

http://jsfiddle.net/p43BH/1/

Mis à jour pour permettre le retour en arrière.

3
Steve Claridge

Compris avec ça:

$("#div_id").prop('maxlength', '80');

Je ne sais vraiment pas s'il y a quelque chose qui ne va pas avec cette solution, mais cela a fonctionné pour moi.

3
user3460837

Une façon simple de procéder consiste à définir le texte dans la zone de texte sur une sous-chaîne du montant total. Vous pouvez trouver un exemple ici:

http://www.mediacollege.com/internet/javascript/form/limit-characters.html

2
Mark Hildreth

Si vous changez votre js pour ressembler à ceci, cela devrait fonctionner pour vous:

var $txtLenLeft = $('#txt-length-left'); // lets cache this since it isn't changing
$('#send-txt').keydown(function(e) { //take the event argument
   var Length = $(this).val().length; // lets use 'this' instead of looking up the element in the DOM
   var AmountLeft = maxLen - Length;
   $txtLenLeft.html(AmountLeft);
   if(Length >= maxLen && e.keyCode != 8){ // allow backspace
      e.preventDefault(); // cancel the default action of the event
   }
});

Vous pouvez voir un exemple de travail ici: http://jsfiddle.net/aP5sK/2/

1
Martin Jespersen

ehm, textarea maxlength est un attribut valide en html5? non pris en charge dans ie9, c'est tout.

w3nerds http://www.w3.org/TR/html-markup/textarea.html#textarea.attrs.maxlength

w3fools http://www.w3schools.com/tags/att_textarea_maxlength.asp

1
commonpike

Je pense que la meilleure façon en utilisant maxlenght propriété + jquery _ ​​keydown, keyup, coller événements

// text input maximum lenght
$(document).on('keydown keyup paste', 'input[type=text]', function(e) {
  var textArea = $('input[type=text]').val(),
    textLenght = textArea.length,
    limit = $('textarea').attr('maxlength'),
    remain = 'left ' + parseInt(limit - textLenght) + ' chars';
  $('#remain-title').text(remain);
  if (textLenght > 500) {
    $('textarea').val((textArea).substring(0, limit))
  }
});

// tex area maximum lenght
$(document).on('keydown keyup paste', 'textarea', function(e) {
  var textArea = $('textarea').val(),
    textLenght = textArea.length,
    limit = $('textarea').attr('maxlength'),
    remain = 'left ' + parseInt(limit - textLenght) + ' chars';
  $('#remain-description').text(remain);
  if (textLenght > 500) {
    $('textarea').val((textArea).substring(0, limit))
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Title</label>
  <p id="remain-title"></p>
  <input type="text" placeholder="Enter Title" maxlength="500"/>
</div>
<br>
<hr>
<br>
<div>
  <label>Description</label>
  <p id="remain-description"></p>
  <textarea placeholder="Enter custom description" rows="4" maxlength="500"></textarea>
</div>

Voir JSFiddle

0
EgoistDeveloper

Je trouve que cela fonctionne parfaitement, et ne clignote même pas les caractères en excès dans la zone de texte avant de les supprimer, comme le font quelques autres solutions.

<h1>Add a comment:</h1>
<form>
    <textarea name="commentText" id="commentText"></textarea>
</form>
<br><span id="commentChars">1000</span> characters remaining

<script type="text/javascript">

    function checkChars(){
        var numChars = $('#commentText').val().length;
        var maxChars = 1000;
        var remChars = maxChars - numChars;
        if (remChars < 0) {
            $('#commentText').val($('#commentText').val().substring(0, maxChars));
                remChars = 0;
            }
        $('#commentChars').text(remChars);
    }

    $('#commentText').bind('input propertychange', function(){
        checkChars();
    });

    checkChars();

</script>
0
Dorian Fabre

Voici une solution utilisant l'attribut de données HTML5 pour se lier automatiquement à toutes les zones de texte requises:

$('textarea[data-max-length]').live('keypress', function(e) {
    if (String.fromCharCode(e.charCode || e.keyCode).match(/\S/) && $(this).val().length >= $(this).attr('data-max-length')) {
        e.preventDefault();
    }
});
0
Mika Tähtinen

Je sais que c'est un peu tard, mais je devais comprendre cela aussi. Je devais le faire fonctionner avec des longueurs d'octets UTF8 et autoriser certaines touches. Voici ce que je suis venu avec:

checkContent = function (event) {

    var allowedKeys = [8,46,35,36,37,38,39,40];
    var contentLength = lengthInUtf8Bytes(jQuery(event.currentTarget).val());
    var charLength = lengthInUtf8Bytes(String.fromCharCode(event.charCode));

    if (charLength + contentLength > 20) {

        if(jQuery.inArray(event.keyCode, allowedKeys) == -1) {
            event.preventDefault();
        } 
    }
}

countLength = function(event) {

    var len = lengthInUtf8Bytes(jQuery(event.currentTarget).val());
    jQuery('#length').html(len);
}


lengthInUtf8Bytes = function(str) {
    var m = encodeURIComponent(str).match(/%[89ABab]/g);
    return str.length + (m ? m.length : 0);
}

jQuery(function(){jQuery("#textarea").keypress(function(event){checkContent(event)}).keyup(function(event){countLength(event)})});

Vous devez avoir une zone de texte avec id #textarea et un élément pour afficher la longueur actuelle avec id #length. 

L'événement touche indique s'il faut ou non autoriser la frappe. L'événement keyup compte la taille des données dans le champ une fois que la frappe a été autorisée/empêchée.

Ce code fonctionne avec les clés suivantes: home, end, pagedown, pageup, backspace, delete, haut, bas, gauche et droite. Il ne s'agit pas de coller dans le presse-papiers.

J'espère que quelqu'un le trouvera utile!

0
Andrew Plank

Essaye ça. Même travaille pour copier coller à partir du clavier:

$("#comments").unbind('keyup').keyup(function(e){
    var val = $(this).val();
    var maxLength = 1000;
    $('#comments').val((val).substring(0, maxLength));
    $("#comments_length").text($("#comments").val().length);
});
0
vinayjags
$("#message-field").on("keyup paste", function() {
  var $this, limit, val;
  limit = 140;
  $this = $(this);
  val = $this.val();
  $this.val(val.substring(0, limit));
  return $('#character-remaining').text(limit - $this.val().length);
});
0
Diego Plentz

S'appuyant sur les touches, keydown, keyup est une solution imparfaite, car un utilisateur peut copier et coller des données dans la zone de texte sans appuyer sur aucune touche.

Pour limiter la longueur du texte dans une zone de texte avec JavaScript, quelle que soit la façon dont les données y sont stockées, vous devez vous fier à un minuteur setInterval.

setInterval(function() {
if ($('#message').val().length > 250) {
    $('#message').val($('#message').val().substring(0, 250));
}}, 500);

Évidemment, je suppose que vous avez un identifiant de message attribué à votre zone de texte.

0
Halfstop

essaye ça.

var charLmt = "200";//max charterer 
 $("#send-txt").keydown(function(){
   var _msgLenght = $(this).val().length;
   if (_msgLenght > charLmt) {
   $(this).val($(this).val().substring(0, charLmt));
  }
});
0
insCode