Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

dirs

Aumenta altura do textarea conforme texto já digitado.

Recommended Posts

Olá, por questão de curiosidade eu comecei a tentar faze uma função igual ao do google calendar para que ao ir digitando o texto ou dando "Enters" dentro do textarea ele aumenta-se de tamanho e assim não dar barra de rolagem nunca. Primeiro tentei copiar o codigo do google, porem como todos que já tentaram tla façanha, sabem que é praticamente impossivel a não ser que se copiei todas 1600 e tantas linhas de codigo do .js...

 

Ok, depois de pensar um pouco comecei a fazer e cheguei ao seguinte resultado:

 

O codigo parece ser grande mais tirando os comentarios fica "pequeno".

 

Coloquei o codigo aqui primeiro por que procurei e não achei nada assim na internet toda. Segundo por que concerteza vocês terão ajustes e vão deixar isso rodando belezinha.

 

A primeira coisa que seria legal seria tirar a propiedade de scrollbar do textarea, isso deve ser facinho só que depois de escrever esse codigo tou sem paciencia por hoje. Até... espero que seja ultil e melhorado.

 

java script:

//numero do linhas já setadavar niLin = 5//numero inicial de linhas dadas por entersvar niLin_ = 0//Função de resize no textareafunction cText(obj,evtKeyPress) {	//puxa o que seria a quantidade de linhas e adiciona a já setada pelos enters...	nLin = ((obj.value.length)/30)+niLin_;	//puxa o tamanho em pixels que já foi definido no ta	cTam = obj.style.height;	//faz verificação de tecla pressionada (crossbrowser)	if(window.event) { // Internet Explorer	  nTecla = evtKeyPress.keyCode; }	else if(evtKeyPress.which) { // Nestcape / firefox	  nTecla = evtKeyPress.which;	}	//se a tecla não for o enter	if (nTecla !== 13) {		// se o numero de "nLin" ou seja, caracteres digitados, dividido por 30 (uma media de caracteres por linha). for maior que o numero inicial de linhas:	if (nLin >= niLin) {		//retira o px da propiedade para poder fazer adição matematica		cTam = cTam.replace("px","")		//tranforma em "numero"		cTam = Math.floor(cTam);		//faz adição. tamanho segundo a fonte que eu usei.		obj.style.height = cTam + 18;		//aumenta o numero "inicial" de linhas		niLin++;	}	} else { //se a tecla digitada for enter.		//retira o px da propiedade para poder fazer adição matematica		cTam = cTam.replace("px","")		//tranforma em "numero"		cTam = Math.floor(cTam);		//faz adição. tamanho segundo a fonte que eu usei.		obj.style.height = cTam + 18;		//aumenta o numero "inicial" de linhas		niLin++;		//aumenta o numero colocado por "enters"		niLin_++;	}}// Por Dirceu (dirceuu@gmail.com)
CSS (para estilo do textarea):

textarea {	font-size: 11px;	color: #333333;	border: 1px solid #BBC5D9;	font-family: Arial, Helvetica, sans-serif;	padding: 3px;}
HTML (o textarea):

<textarea name="textarea" cols="38" onkeypress="cText(this,event);" style="height:74px"></textarea>

Compartilhar este post


Link para o post
Compartilhar em outros sites

e tipo kra, voce nao pode levar em consideracao apenas o numero de letras para separar uma linha, pois quase nunca a fonte usada eh uma courier new ou outra mono-espacada, alem das diferencas na width da propria textarea... como as letras tem tamanhos diferentes, usar o numero de letras é um procedimento falho...em formas gambiarristicas a melhor maneira seria deixar um overflow: hidden, e ir verificando o tamanho da barra de rolagem, dessa forma voce pode verificar se é nescessario aumentar o tamanho, mas eu nao vo falar como fazer isso pois levaria um tempinho... boa sorte ae XD

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.