Come impedire all’utente di inserire testo in textarea dopo aver raggiunto il limite massimo di caratteri

Voglio impedire all’utente di inserire il testo in textarea una volta raggiunto il limite massimo di caratteri. Cosa stava succedendo quando ho raggiunto il limite massimo, quindi la barra di scorrimento dell’area di testo è stata spostata in alto. In qualche modo, prevengo questo con questo codice.

jQuery(document).ready(function($) { $('textarea.max').keyup(function() { var $textarea = $(this); var max = 400; if ($textarea.val().length > max) { var top = $textarea.scrollTop(); $textarea.val($textarea.val().substr(0, max)); $textarea.scrollTop(top); } }); }); //end if ready(fn) 

Ma voglio anche che dopo aver raggiunto il limite massimo l’utente non sia in grado di digitare nulla nella textarea. Attualmente ciò che accade dopo aver raggiunto il limite massimo se l’utente tiene premuto il tasto, i caratteri digitano nell’area di testo, anche se dopo aver rilasciato il pulsante ritorna al testo originale (es. $ Textarea.val ($ textarea.val (). substr (0, max));). Ma lo voglio una volta che questa condizione diventa vera

 if ($textarea.val().length > max) { 

utente incapace di scrivere qualsiasi cosa. Voglio che il cursore svanisca dalla textarea. Ma se l’utente rimuove del testo, è disponibile anche il cursore per consentire all’utente di digitare nuovamente l’input. Come posso farlo?

L’evento keyup si triggers dopo che si è verificato il comportamento predefinito (area di testo popolata).

È preferibile utilizzare l’evento keypress e filtrare i caratteri non stampabili.

Demo: http://jsfiddle.net/3uhNP/1/ (con lunghezza massima 4)

 jQuery(document).ready(function($) { var max = 400; $('textarea.max').keypress(function(e) { if (e.which < 0x20) { // e.which < 0x20, then it's not a printable character // e.which === 0 - Not a character return; // Do nothing } if (this.value.length == max) { e.preventDefault(); } else if (this.value.length > max) { // Maximum exceeded this.value = this.value.substring(0, max); } }); }); //end if ready(fn) 
  

Usa il codice sopra per limitare il numero di caratteri inseriti in un’area di testo, se vuoi disabilitare la textarea stessa (cioè, non potrai più modificare in seguito) puoi usare javascript / jquery per disabilitarlo.

Mantienilo semplice

 var max = 50; $("#textarea").keyup(function(e){ $("#count").text("Characters left: " + (max - $(this).val().length)); }); 

e aggiungilo nel tuo html

  

vedi esempio

Basta scrivere questo codice nel file Javascript. Ma è necessario specificare l’attributo ‘maxlength’ con textarea. Questo funzionerà per tutta la textarea di una pagina.

 $('textarea').bind("change keyup input",function() { var limitNum=$(this).attr("maxlength"); if ($(this).val().length > limitNum) { $(this).val($(this).val().substring(0, limitNum)); } }); 

Puoi mantenere il tuo evento così com’è e utilizzare questa libreria

Esempi

 // applying a click event to one element Touche(document.querySelector('#myButton')).on('click', handleClick); // or to multiple at once Touche(document.querySelectorAll('.myButtons')).on('click', handleClicks); // or with jQuery $('.myButtons').on('click', handleClicks); 

Potresti dare direttamente a maxlength textarea per disabilitare se stesso. Tuttavia, si desidera mostrare il messaggio appropriato, quindi utilizzare l’evento keyup per il comportamento predefinito e la length textarea per il calcolo del charcter e per visualizzare il messaggio appropriato.

HTML

 

jQuery

 $(function(){ var max = parseInt($("#tarea").attr("maxlength")); $("#count").text("Characters left: " + max); $("#tarea").keyup(function(e){ $("#count").text("Characters left: " + (max - $(this).val().length)); if($(this).val().length==max) $("#msg").text("Limit Reached...."); else $("#msg").text(""); }); }); 

Demo Fiddle

Per coloro che già utilizzano ES2015 nei tuoi browser, ecco un’implementazione utilizzando alcune delle risposte sopra riportate:

 class InputCharacterCount { constructor(element, min, max) { this.element = element; this.min = min; this.max = max; this.appendCharacterCount(); } appendCharacterCount(){ let charCount = ``; this.element.closest('.form-group').append(charCount); } count(event){ this.element.attr('maxlength', this.max); // Add maxlenght attr to input element let value = this.element.val(); this.element .closest('.form-group') .find('.char-counter') .html(value.length+'/'+this.max); // Add a character count on keyup/keypress if (value.length < this.min || value.length > this.max) { // color text on min/max changes this.element.addClass('text-danger'); } else { this.element.removeClass('text-danger'); } } } 

Uso:

 let comment = $('[name="collection-state-comment"]'); let counter = new InputCharacterCount(comment, 21, 140); $(comment).keyup(function(event){ counter.count(event); }); 

Potresti usare questo plugin invece di provare a scrivere il tuo. Ho trovato che funziona abbastanza bene.