TROCAR <type="text"> POR <textarea> ONFOCUS

paulo_roll · Março 16, 2012

Boa tarde pessoal.

Gostaria de apresentar na página um <input type="text"> normal

mas quando o usuário clicar em cima (onfocus) gostaria de que esse

<input type="text"> se transformasse em um <textarea></textarea>.

Aí se o usuário não digitar nada e tirar o foco do textarea (onblur),

voltaria a ser o <input type="text">.

Alguém tem essa função aí?

Diego L.L. · Março 17, 2012

Use o método .replaceWith() da biblioteca jQuery, o modo de usa encontrasse nesta URL: http://api.jquery.com/replaceWith/...

Basta anexar o evento focus ao :text e usar este método para substitui-lo, e depois da substituição anexe o evento blur ao <textarea> e verifique se o campo está preenchido, caso não esteja substitua o <textarea> com o mesmo método.

Pra evitar de ter que anexar ao <textarea> o evento toda vez que o :text for substituído você pode usar o método .live() da biblioteca, que anexa eventos a elementos que surgem pós DOM.

Henrique Barcelos · Março 17, 2012

Pra que tudo isso?

Não seria mais fácil apenas alterar a altura? Pq visualmente, a única coisa que difere um input text de um textarea é o fato de o último ser multilinha...

paulo_roll · Março 18, 2012

Segui a dica do Henrique em mudar a altura do Textarea. Fica

mais fácil mesmo. Porém preciso finalizar alguns erros.

No início, quando clico (ONFOCUS), tudo ok, o textarea limpa o texto

e muda o height de 38px para 100px.

Porém eu gostaria se o internauta não digitasse nada e tirasse o foco do campo

(ONBLUR), o textarea voltaria aos seus 38px de altura e voltaria o texto

padrão "Escreva a sua pergunta...". Isso funcionou também e o textarea volta ao seu

padrão.

Mas quando eu clico em cima novamente(ONFOCUS), o formulário deveria aumentar

sua altura novamente e limpar o texto padrão do textarea e isso não acontece mais.

<script type="text/javascript">
	function clean_default_pass(field) {
   		if (field.value == field.defaultValue) {
       		field.value = "";
			document.getElementById("message").style.height="100px";
   		}
	}

	function write_default_pass(field) {
   		if (field.value == "") {
       		field.value = "Escreva a sua pergunta...";
			document.getElementById("message").style.height="38px";
   		}
	}
</script>

O TEXTAREA ESTÁ ASSIM:

<textarea name="message" id="message" style="height: 38px;" onfocus="clean_default_pass(this);" onblur=" write_default_pass(this);">Escreva a sua Pergunta...</textarea>

Estou tentando fazer um formulário tipo o do mercado livre (Perguntas ao Vendedor):

Clique aqui

paulo_roll · Março 19, 2012

Consegui resolver esse pequeno bug.

Como java script é case sensitive, tive que deixar a mensagem padrão como

"Escreva a sua Pergunta...". antes um estava com o P minúsculo. hehehehe.

Mas o que quero incrementar agora nesse form é quando o internauta clicar em

enviar, surge um campo de e-mail para preencher. Depois ele clica em enviar

e aparece mensagem enviada com sucesso, na mesma página. Alguém tem alguma

função que faça isso?

Dii · Março 19, 2012

Uma solução bacana e que deixa mais animado também é isso:

<html>
   <head>
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
       <script type="text/javascript">
       $(document).ready(function(){
           $('#message').css('height', '38px');

           $('#message').focus(function(){
               $('#message').animate({height:150},"fast");
           });

           $('#message').blur(function(){
               $('#message').animate({height:38},"fast");
           });
       });
       </script>
       <style type="text/css">
       #message
       {
           width: 300px;
       }
       </style>
   </head>
   <body>
       <textarea name="message" id="message">Escreva a sua Pergunta...</textarea>
   </body>
</html>

:thumbsup:

paulo_roll · Março 20, 2012

Uma solução bacana e que deixa mais animado também é isso:

<html>    <head>        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>        <script type="text/javascript">        $(document).ready(function(){            $('#message').css('height', '38px');                        $('#message').focus(function(){                $('#message').animate({height:150},"fast");            });                        $('#message').blur(function(){                $('#message').animate({height:38},"fast");            });        });        </script>        <style type="text/css">        #message        {            width: 300px;        }        </style>    </head>    <body>        <textarea name="message" id="message">Escreva a sua Pergunta...</textarea>    </body></html>

:thumbsup:

Show de bola!

O efeito deu um toque bem artístico. Excelente dica e obrigado pela ajuda, Dii!

Acabei fazendo uma adaptação para as funções que limpavam o formulário e caso

nada fosse preenchido, voltaria ao tamanho padrão com o texto padrão.

Só o botão de enviar que ficou meio estático e sem efeito. Esse botão fica

em oculto em uma div. Quando o internauta clica ae aparece o fade que

você citou mais o botão que estava oculto, porém este sem efeito.

<script type="text/javascript">
       function clean_default_pass(field) {
   		if (field.value == field.defaultValue) {
       		field.value = "";
			$('#message').animate({height:150},"slow");
			document.getElementById("botao_enviar").style.display="inline";
   		}
	}

	function write_default_pass(field) {
   		if (field.value == "") {
       		field.value = "Escreva a sua pergunta...";
			$('#message').animate({height:38},"slow");
			document.getElementById("botao_enviar").style.display="none";
   		}
	}



       </script>

<form class="formee" action="">
           	<div class="grid-12-12">
               <h1 class="left">PERGUNTAS AO VENDEDOR</h1>
               <!-- <label>Field Label <em class="formee-req">*</em></label> -->
               <textarea name="message" id="message" style="height: 38px;" onfocus="clean_default_pass(this);" onblur=" write_default_pass(this);">Escreva a sua pergunta...</textarea>
       		</div>
               <div class="grid-3-12" id="email" style="display:none;">
                       	<input type="text" name="email" />
               </div>
               <div class="grid-12-12" id="botao_enviar" style="display:none">
                       <input type="submit" id="botao_enviar" title="send" onclick="" value="Enviar Pergunta" />
               </div>
           </form>

O que eu gostaria de incrementar agora seria pegar a pagina de

mensagem_enviada.php e carregasse a resposta dentro de uma div

sem precisar recarregar essa página. Aos poucos estou entendendo o código

que voces postam aqui, hehehehe.

Abraço.

Diego L.L. · Março 20, 2012

Desculpe, mas respondi o que me perguntaram.. Não me perguntaram como aumentar ou diminuir um <textarea>, me perguntaram como troca-lo...

paulo_roll · Março 20, 2012

Tranquilo Diego.

Agradeço pela dica. Acabou que se desenrolou pra outro lado, hehehehe

abraço.

Ae pessoal!

Agora estou tentando fazer com que a página de mensagem enviada carregue

dentro de uma div e com aquele efeito de fade que achei muito bom.

<form class="formee" action="enviar.php">
           	<div class="grid-12-12">
               <h1 class="left">PERGUNTAS AO VENDEDOR</h1>
               <!-- <label>Field Label <em class="formee-req">*</em></label> -->
               <textarea name="message" id="message" style="height: 38px;" onfocus="clean_default_pass(this);" onblur=" write_default_pass(this);">Escreva a sua pergunta...</textarea>
       		</div>
               <div class="grid-3-12" id="email" style="display:none;">
                       	<input type="text" name="email" />
               </div>
               <div class="grid-12-12" id="botao_enviar" style="display:none">
                       <input type="submit" id="botao_enviar" title="send" onclick="" value="Enviar Pergunta" />
               </div>
           </form>
           <div id="mensagem_enviada"></div>

O que estou tentando fazer é ao enviar, o formulário ficará oculto e a pagina enviar.php

carregará dentro da <div id="mensagem_enviada"></div>, com um efeito de desaparecer o formulário

lentamente e aparecer a mensagem do enviar.php lentamente também. Alguém sabe como?

obs: Já tenho o jquery no header.

Arquivado

TROCAR <type="text"> POR <textarea> ONFOCUS

Recommended Posts

paulo_roll 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego L.L. 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

paulo_roll 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

paulo_roll 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dii 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

paulo_roll 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego L.L. 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

paulo_roll 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante