Limitare l'utilizzo di una TextArea

**[ks]furlo** · 20-07-2011, 16:43

Ciao a tutti,

dopo aver provato e riprovato, dopo aver letto e riletto, sono qui a richiedere il vs aiuto.

Sto realizzando un progetto molto particolare che richiede di porre dei limiti alla textarea, ovvero limitare sia il numero di righe ma anche il numero di caratteri per riga. Facciamo un esempio: devo poter scrivere 3 righe da 30 caratteri, questo è solo un esempio, infatti ogni textarea in base ai parametri ROWS[max numero di righe] e COLS[max num di caratteri per riga], sarà personalizzata a seconda dell'uso.

Allora fino ad ora ho risolto i seguenti problemi:

- ho limitato il numero di caratteri totali,
- aggiungo un ritorno a capo quando raggiungo il limite di caratteri per la riga e le righe sono minori al max numero di righe a disposizione,
- controllo gli a capo ovvero se io digito 'pippo' - invio - 'pluto' - invio - 'paperino' e premo invio ancora non succede nulla resta li...

Il guaio accade quando per esempio dopo aver digitato pippo ed essere andato a capo. torno sulla riga pippo e continuo a scrivere...
A quel pto si perdono tutti i controlli..

codice:

$('textarea').keyup(function(){countRow(this);});

$('textarea').focus(function(){
   prevText = $(this).val();
   lR = $(this).attr('cols'); 
   nR = $(this).attr('rows');
   mC = (lR*nR)+(nR-1);
});

function countRow(e){
	if($.client.os != "Windows") var rows=$(e).val().split('\n');
	else var rows=$(e).val().split('\r');

	var tmp = rows.length;
	//controllo il numero di righe e di caratteri
	
	if(tmp>=nR) {
		$(e).val($(e).val().substr(0,$(e).val().length));
	}
	
	//controllo che i caratteri inseriti non siano maggiori di mC
	if($(e).val().length>=mC) {
		console.log('Verifica: L. tot > '+mC);
		$(e).val($(e).val().substr(0,mC));
	}

	//aggiungo un a capo ogni volta che raggiungo la max dimensione della riga 
	if($(e).val().length>0 && $(e).val().length%lR==0) {
	  if($(e).val().length<(mC - 1)) {
			console.log('Ho aggiunto una nuova riga');
			if($.client.os != "Windows") $(e).val($(e).val()+'\n');
			else $(e).val($(e).val()+'\r');
		}
		else $(e).val($(e).val().substr(0,mC));
	}
	
	//devo controllare se premo invio
	if(event.keyCode==13) {
		console.log('Premuto INVIO');
		if(tmp>nR) {
		  var l = $(e).val().length;
		  $(e).val($(e).val().substr(0,l));
		} 
		
	}

Per fare tutto ciò ho utilizzato JQuery e un plugin [jquery.client.js] che mi permette di identificare il SO in modo da distinguere se utilizzo \n o \r per andare a capo.

Certo di una qualche risposta anche del tipo tu sei Pazzo ringrazio tutti in anticipo

**carlomarx** · 21-07-2011, 03:32

È che secondo me sbagli proprio approccio. Lascia perdere jQuery, ti complica solo la vita! Prova a partire da qui:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function normalOnly(oField, oKeyEvent) {
	var	nKey = (oKeyEvent || window.event || { charCode: 0 }).keyCode,

		// qui il numero massimo di caratteri per riga:
		nLineChrs = 30,
		// qui il numero massimo di caratteri in totale:
		nTotalChrs = 154,

		nSelS = oField.selectionStart, nSelE = oField.selectionEnd,
		sVal = oField.value, nLen = sVal.length,
		nBackward = 0, nNewLine = 0, nLineStart = 0;

	if (nSelS >= nLineChrs) {
		nBackward = nSelS - nLineChrs;
		nNewLine = sVal.substring(nBackward, nSelS).search(new RegExp("\\n(?!.{0," + String(nLineChrs - 2) + "}\\n)"));
		nLineStart = nBackward + nNewLine + 1;
	}

	var	nAfterLen = nSelE + nLineStart + nLineChrs - nSelS,
		sLine = sVal.substring(nLineStart, nSelS) + sVal.substring(nSelE, nAfterLen > nLen ? nLen : nAfterLen),
		bKeepLine = nKey === 13 || nLen + 1 < nLineChrs || ((nNewLine > -1 || nKey > 0) && (sLine.length < nLineChrs || (nKey > 0 && (nLen === nAfterLen || sVal.charAt(nAfterLen) === "\n")) || /\n/.test(sLine)));

	return (nKey > 32 && nKey < 41) || (bKeepLine && nLen + nSelS - nSelE < nTotalChrs);
}
</script>
</head>

<body>
<form name="myForm">


Textarea con numero fisso di caratteri per riga:

<textarea cols="50" rows="10" name="myInput" onkeypress="return(normalOnly(this, event));" onpaste="return(false);" />Lorem ipsum</textarea></p>
</form>

</body>
</html>

**[ks]furlo** · 21-07-2011, 09:26

Ciao CarloMarx,

innanzitutto grazie per la risposta, ho provato il codice solo che molto probabilmente mi sono spiegato male io

colpa anche delle mille cose che mi frullano per la testa.
Allora il problema è il seguente.
Dalle specifiche del progetto, a seconda del tipo di textArea io devo poter limitare sia il numero di caratteri per riga ma anche il numero di righe stesse. Questi parametri mi sono dati dai campi rows[numero di righe] e cols[max numero di caratteri per riga]. Bene indipendente mente che uso JQuery oppure no, secondo me è vero che sbaglio approccio solo che nn saprei come fare.
La prima soluzione era una cosa più complessa ovvero ogni volta che premevo un carattere splittavo il testo con \n e contavo il numero di righe, ad ogni riga contavo il numero di caratteri ed eliminavo il superfluo aggiungendo un \n alla stringa poi alla fine la textarea veniva ripopolata con le righe che avevo ottenuto. Il problema di questa soluzione è che ogni volta che premo un tasto splitto la textarea in righe e mi toglie il carattere \n

La soluzione che mi hai postato mi limita solo i caratteri sul max numero disponibile, ma nn tiene conto delle righe, infatti se premo invio + volte questo non deve accadere, ma deve essere limitato dal numero rows....

In attesa di un riscontro ti ringrazio per il tempo concessomi.

**carlomarx** · 21-07-2011, 13:00

Non ci vuole niente a modificarlo alla bisogna (in verde le aggiunte, in rosso le modifiche)…

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function normalOnly(oField, oKeyEvent) {
	var	nKey = (oKeyEvent || window.event || { charCode: 0 }).keyCode,

		// qui il numero massimo di caratteri per riga:
		nCols = 30,
		// qui il numero massimo di righe:
		nRows = 3,

		nSelS = oField.selectionStart, nSelE = oField.selectionEnd,
		sVal = oField.value, nLen = sVal.length,
		nBackward = 0, nNewLine = 0, nRowStart = 0,
		aReturns = (sVal.substring(0, nSelS) + sVal.substring(nSelE, sVal.length)).match(/\n/g);

	if (nSelS >= nCols) {
		nBackward = nSelS - nCols;
		nNewLine = sVal.substring(nBackward, nSelS).search(new RegExp("\\n(?!.{0," + String(nCols - 2) + "}\\n)"));
		nRowStart = nBackward + nNewLine + 1;
	}

	var	nAfterLen = nSelE + nRowStart + nCols - nSelS,
		sRow = sVal.substring(nRowStart, nSelS) + sVal.substring(nSelE, nAfterLen > nLen ? nLen : nAfterLen),
		bKeepCols = nKey === 13 || nLen + 1 < nCols || ((nNewLine > -1 || nKey > 0) && (sRow.length < nCols || (nKey > 0 && (nLen === nAfterLen || sVal.charAt(nAfterLen) === "\n")) || /\n/.test(sRow)));

	return (nKey !== 13 || (aReturns ? aReturns.length + 1 : 1) < nRows) && ((nKey > 32 && nKey < 41) || bKeepCols);
}
</script>
</head>

<body>
<form name="myForm">


Textarea con numero fisso di caratteri per riga:

<textarea cols="50" rows="10" name="myInput" onkeypress="return(normalOnly(this, event));" onpaste="return(false);" /></textarea></p>
</form>
</body>
</html>

**carlomarx** · 21-07-2011, 15:43

Sorry, ho beccato un paio di bug… usa quest'altra versione:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function checkRows(oField, oKeyEvent) {
	var	nKey = (oKeyEvent || /* old IE */ window.event || /* check is not supported! */ { keyCode: 38 }).keyCode,

		// qui il numero massimo di caratteri per riga:
		nCols = 30,	
		// qui il numero massimo di righe:
		nRows = 5,

		nSelS = oField.selectionStart, nSelE = oField.selectionEnd,
		sVal = oField.value, nLen = sVal.length,

		nBackward = nSelS >= nCols ? nSelS - nCols : 0,
		nDeltaForw = sVal.substring(nBackward, nSelS).search(new RegExp("\\n(?!.{0," + String(nCols - 2) + "}\\n)")) + 1,
		nRowStart = nBackward + nDeltaForw,
		aReturns = (sVal.substring(0, nSelS) + sVal.substring(nSelE, sVal.length)).match(/\n/g),
		nRowEnd = nSelE + nRowStart + nCols - nSelS,
		sRow = sVal.substring(nRowStart, nSelS) + sVal.substring(nSelE, nRowEnd > nLen ? nLen : nRowEnd),
		bKeepCols = nKey === 13 || nLen + 1 < nCols || /\n/.test(sRow) || ((nRowStart === 0 || nDeltaForw > 0 || nKey > 0) && (sRow.length < nCols || (nKey > 0 && (nLen === nRowEnd || sVal.charAt(nRowEnd) === "\n"))));

	return (nKey !== 13 || (aReturns ? aReturns.length + 1 : 1) < nRows) && ((nKey > 32 && nKey < 41) || bKeepCols);
}
</script>
</head>

<body>


Textarea con numero fisso di caratteri per riga:

<textarea cols="50" rows="10" name="myInput" onkeypress="return checkRows(this, event);" onpaste="return false;" /></textarea></p>
</form>
</body>
</html>

**[ks]furlo** · 22-07-2011, 17:14

Grazie finisco altra sezione e poi mi ci rimetto e ti faccio saper

**[ks]furlo** · 27-07-2011, 13:45

Ciao Carlo,

ho avuto modo di provare lo script.... il numero di righe ora sembra ok, nel senso che premendo invio + di 2 volte nn mi fa andare a capo... Resta però il problema del numero di caratteri per riga

purtroppo se digito + di X caratteri il testo nn si blocca(non va a capo in automatico ho provato a leggere il testo per capirne la logica ma ci ho capito poco...)

Resto in attesa di una tua risposta

**carlomarx** · 27-07-2011, 14:14

Vuol dire che in quell'esempio puoi digitare più di 30 caratteri per riga? Con che browser hai provato? Con ff e chrome non ti fa scrivere più di 30 caratteri per riga.

**[ks]furlo** · 27-07-2011, 14:52

Sei un grande.... pensavo mi avessi abbandonato

Allora io sto usando Chrome, Safari e FF solo che sono su mac ... ^^ spero non sia per quello...

**carlomarx** · 27-07-2011, 15:52

Bene bene, ho capito dove sta l'errore. Nel mio script la variabile nKey dovrebbe contenere 0 qualora il tasto digitato rappresentasse un carattere, mentre dovrebbe contenere un numero maggiore di 0 qualora venisse premuto qualsiasi altro tasto (tipo invio, canc, le frecce, etc. etc.). Questo perché nKey è la proprietà keyCode dell'evento keypress. Se avessi voluto ottenere il codice dei caratteri digitati avrei dovuto chiamare la proprietà charCode, che appunto restituirebbe un numero maggiore di 0 solo qualora venissero digitati dei caratteri.
A quanto pare invece Safari restituisce un numero maggiore di 0 per la proprietà keyCode anche qualora venga digitato un carattere, sicché nel seguente estratto del mio script le condizioni in rosso restituiscono sempre true:

codice:

((nRowStart === 0 || nDeltaForw > 0 || nKey > 0) && (sRow.length < nCols || (nKey > 0 && (nLen === nRowEnd || sVal.charAt(nRowEnd) === "\n"))))

La soluzione sarebbe quella di sostituire nKey > 0 con false se viene digitato un carattere qualsiasi, con true se viceversa viene digitato un tasto non contenente caratteri (invio, canc, etc. etc.). In Firefox è già così. Si dovrebbe trovare un metodo funzionante con Safari. Purtroppo non mi viene in mente niente ora

Spero comunque che tu abbia capito qual è il problema. Puoi verificarlo da te con questa pagina di test:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test keypress</title>
<script type="text/javascript">
function checkKeyCode(oKeyEvent) {
	document.getElementById("restult").innerHTML = (oKeyEvent || window.event || { keyCode: 38 }).keyCode;
}
</script>
</head>

<body>
<form name="myForm">
<textarea cols="50" rows="10" name="myInput" onkeypress="checkKeyCode(event);" /></textarea></p>


La proprietà keyCode dell'evento keyPress per il tasto digitato ha restituito: <span id="restult">[SCRIVI QUALCOSA]</span>.</p>
</form>
</body>
</html>

Aprila con Firefox e con Safari e digita tasti a caso, alternando caratteri e metatasti (invio, frecce, canc, etc. etc.).

Discussione: Limitare l'utilizzo di una TextArea

Strumenti discussione

Ricerca discussione

Visualizza

Limitare l'utilizzo di una TextArea

Permessi di invio