Comment supprimer des caractères d'une zone de texte lorsque le nombre de caractères dépasse une certaine limite?

Question

Je voudrais implémenter une zone de texte avec une limite de 140 caractères en Javascript de sorte que lorsque le 141ème caractère est ajouté, ce caractère est effacé.

Je ne veux pas afficher de message ou d'alerte à l'utilisateur qui a dépassé la limite. Il y a déjà un counter.re.

Voici un exemple de ce que je veux faire: http://titletweets.com/category/games/michigan-state-vs-north-carolina/

J'utilise jQuery, si elle a déjà cette fonctionnalité s'il vous plaît laissez-moi savoir.

Answer 1

Une banque en Scandinavie a récemment une action en justice parce qu'un client transféré accidentellement un tas d'argent au mauvais compte parce qu'elle a tapé trop de zéros dans la numéro de compte. Cela a rendu le numéro de compte résultant invalide, mais elle n'a pas remarqué parce que l'application Web a effacé silencieusement son chiffre supplémentaire. Alors elle entra quelque chose comme

1223300045 

mais aurait dû entrer

122330045 

et compte par conséquent

122330004 

reçu son argent. Ceci est un défaut majeur d'utilisabilité.

Dans le cas de quelque chose comme une zone de texte, jetez un oeil à l'interface utilisateur de commentaires de StackOverflow. Il vous montre combien de texte est dans votre zone de texte, et vous avez la possibilité d'éditer votre texte, mais la partie vraiment douce est que vous pouvez taper autant que vous voulez, puis modifier jusqu'à la limite nue, vous permettant de vous assurer que vous pouvez dis tout ce que tu aimes. Si votre zone de texte efface le texte de l'utilisateur:

• Ils peuvent ne pas remarquer qu'il arrive, s'ils tapent en regardant le clavier
• Ils doivent effacer du texte avant de pouvoir ajouter une nouvelle formulation plus concise
• Ils seront ennuyés

Ainsi, ma recommandation est de laisser l'utilisateur taper autant qu'ils veulent, mais leur laisser savoir quand ils sont au-dessus de la limite, et les laisser éditer. L'exemple suivant peut vous aider à démarrer. Vous devez modifier les sélecteurs de façon à manipuler uniquement les zones de texte/les entrées de texte dont vous avez besoin. Et n'oubliez pas de faire les choses appropriées si la limite est mauvaise. Cet exemple définit une classe; l'attribut class vous permet de changer la couleur de la zone de texte (ou autre). Vous pourriez vouloir montrer un message ou quelque chose. La clé est de laisser l'utilisateur continuer à taper.

function checkTALength(event) { 
    var text = $(this).val(); 
    if(text.length > 140) { 
    $(this).addClass('overlimit'); 
    } else { 
    $(this).removeClass('overlimit'); 
    } 
} 
function checkSubmit(event) { 
    if($('.overlimit', this).length > 0) { return false; } 
} 

$(document).ready(function() { 
    $('textarea').change(checkTALength); 
    $('textarea').keyup(checkTALength); 
    $('form').submit(checkSubmit); 
}); 

Answer 2

En supposant que vous utilisez un textarea, qui ne dispose pas d'un intégré maxlength, vous pouvez simplement attribuer un événement keyup:

$('#tweet').keyup(function(){ 
    var s = $(this).text(); 
    if(s.length > 140) 
    $(this).text(s.substring(0,140)) 
}); 

Answer 3

Du haut de ma tête:

$('#myTextArea').keyup(function() { 
     var text = $(this).text(); 
     if(text.length == 141) { 
      $(this).text(text.substring(text.length - 2)); 
     } 
    }); 

Answer 4

En supposant que l'ID de la zone de texte est theTextArea, quelque chose comme ça devrait fonctionner.

$("#theTextArea").keyup(function(event) { 

    var text = $("#theTextArea").val(); 
    if (text.length > 140) 
     $("#theTextArea").val(text.substring(0, 140)); 

}); 

Answer 5

Le keyup n'empêchera pas une opération de collage de clic droit qui pourrait aller sur le LIMIT- vous pouvez définir la valeur onchange ou onblur, ainsi que sur la combinaison de touches.

Si vous gérez l'événement à partir du clavier, avant la pression sur la touche, vous pouvez éviter la lettre clignotante 141e.

Ou s'il s'agit d'un élément d'entrée de texte. définir le maxlength

Answer 6

Si c'est une seule zone de texte en ligne, vous pouvez utiliser l'attribut maxlength:

<input type="text" maxlength="140" /> 

Il est également intéressant de noter que quelle que soit votre solution, vous avez encore besoin de répéter la validation sur le côté serveur . Si vous signalez à l'utilisateur que son entrée a été trop longue ou que vous avez simplement tronqué les données, c'est à vous de décider.

Answer 7

$(document).ready(function() { 
     var maxLimit = 140; 
     $('#txtIdInput').keyup(function() { 
     var length = $('#txtIdInput').val().length; 
      if (length > maxLimit) { 
       $("#txtIdInput").val($("#txtIdInput").val().substring(0, maxLimit)); 
      } 
     }); 

    }); 

Answer 8

Une variation sur un thème:

$("#textarea").keyup(function(e) { 
    var trim = this.value.substr(0, 140); // "foo".substr(0, 140) == "foo" 
    if (this.value != trim) { 
     this.value = trim; 
    } 
});