Limitare il numero di righe nella textarea

Sto cercando un javascript che possa limitare il numero di righe (per riga intendo un testo finito dall’utente che preme invio sulla tastiera) l’utente può entrare in textarea. Ho trovato alcune soluzioni ma semplicemente non funzionano o si comportano in modo strano. La soluzione migliore sarebbe un plugin jquery in grado di svolgere il lavoro, qualcosa come CharLimit , ma dovrebbe essere in grado di limitare il conteggio delle righe di testo e non il conteggio dei caratteri.

Grazie in anticipo.

Questo potrebbe aiutare (probabilmente è meglio usare jQuery, onDomReady e aggiungere in modo discreto l’evento keydown alla textarea) ma testato in IE7 e FF3:

 Test      

* Modifica – spiegazione: cattura la pressione del tasto se si preme il tasto ENTER e non aggiunge una nuova riga se le righe nella textarea sono lo stesso numero delle righe della textarea. Altrimenti aumenta il numero di linee.

Edit # 2: Considerando che le persone stanno ancora arrivando a questa risposta ho pensato di aggiornarlo per gestire l’incolla, eliminare e tagliare, nel miglior modo ansible.

   Test        

Come farlo con jQuery:

Bind to keyDown event of textarea.

 function limitTextareaLine(e) { if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) { return false; } } 

Questa soluzione funziona:

  

e l’area di testo sarebbe

   

nel normale HTML:

  

Il numero di righe visibili / di visualizzazione per un determinato blocco di testo varia a seconda dei diversi browser, tipi di carattere utilizzati, ecc. Dovresti impostare un font e una dimensione del font specifici, come minimo, per poter contare in modo semi-affidabile visualizzare le linee.

AGGIORNAMENTO: vedo la modifica. Quindi qualcosa come il codice di kevchadders dovrebbe andare bene per te. Avrai bisogno di js che contenga i caratteri e ‘\ r \ n e controlli contro un limite definito dall’utente. Inoltre, se non usi il suo script, assicurati di usarne uno che includa un controllo dell’intervallo di tempo e / o gli eventi onKeyDown / onKeyUp dell’area di testo. Questo potrebbe essere il motivo per cui alcuni script che hai testato sembrano “comportarsi in modo strano”.

(Fatto con jquery). Non è perfetto ma si preoccupa di avvolgere. Non applicare solo la fine della riga (\ n).
l’evento jquery scroll ha problemi in mozilla e firefox se la proprietà di overflow css in textarea non è automatica, altrimenti rimuovi le linee corrispondenti e imposta overflow nascosto. Potrebbe aiutare il ridimensionamento css: nessuno e altezza fissa.

 $('#textarea').scroll(function () { $(this).css("overflow", "hidden"); /* for the mozilla browser problem */ $(this).animate({scrollTop: $(this).outerHeight()}); while ($(this).scrollTop() > 0) { /* for the copy and paste case */ lines=$(this).val().slice(0,-1); $(this).val(lines); } $(this).css("overflow", "auto"); /* For the mozilla browser problem */ }); 

Questo è praticamente lo stesso della risposta di Ivan, usando jQuery. L’ho provato per un mio progetto; sembra funzionare bene

  

Esempio di jQuery. Funziona sia per digitare che per incollare.

  //Limit to # of rows in textarea or arbitrary # of rows $('#yourtextarea').bind('change keyup', function(event) { //Option 1: Limit to # of rows in textarea rows = $(this).attr('rows'); //Optiion 2: Limit to arbitrary # of rows rows = 6; var value = ''; var splitval = $(this).val().split("\n"); for(var a=0;a0) value += "\n"; value += splitval[a]; } $(this).val(value); }); 

L’ho esteso un po ‘per rilevare anche l’overflow senza interruzione di riga manuale. Questo è per textarea di dimensioni fisse con “overflow: hidden”.

Al momento la mia soluzione rende il font più piccolo se non si adatta a textarea. E lo rende ancora più grande se ansible.

 var keynum, allowedLines = 5, defaultFontSize = 13/*px*/; $(document).ready(function() { $("textarea").keydown(function(e, obj) { if(window.event) keynum = e.keyCode; else if (e.which) keynum = e.which; if (keynum == 13 && allowedLines < = $(this).val().split("\n").length) return false; }); $("textarea").keyup(function(e, obj) { // Avoid copy-paste if (allowedLines < $(this).val().split("\n").length) { lines = $(this).val().split("\n").slice(0, allowedLines); $(this).val( lines.join('\n') ); } // Check overflow if ((this.clientHeight < this.scrollHeight)) { while ((this.clientHeight < this.scrollHeight)) { currFontSize = $(this).css('font-size'); finalNum = parseFloat(currFontSize, 11); stringEnding = currFontSize.slice(-2); $(this).css('font-size', (finalNum-1) + stringEnding); } } else if ($(this).css('fontSize') != defaultFontSize+'px') { while ($(this).css('font-size') != defaultFontSize+'px') { // First lets increase the font size currFontSize = $(this).css('font-size'); finalNum = parseFloat(currFontSize, 11); stringEnding = currFontSize.slice(-2); $(this).css('font-size', (finalNum+1) + stringEnding); // lets loop until its enough or it gets overflow again if(this.clientHeight < this.scrollHeight) { // there was an overflow and we have to recover the value $(this).css('font-size', currFontSize); break; } } } }); });