Descritivo em Campo de texto

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Descritivo em Campo de texto

Mensagem por Mauricio Molina em 08/05/14, 08:59 pm

  • Descrição:
Ola...

Tenho um formulário de postagem, onde tem dois campos para o membro escrever...

Nele tem aqueles textos explicativos, é possível quando o membro clicar para escrever o texto sair automaticamente?

Atualmente tem que selecionar e escrever por cima, ou apagar...

Todo o código:

Spoiler:

Código:
<script>
function gerarf(){
jQuery('input[name="message"]').val('<br/>[b]Nome/apelido:[/b]  '+jQuery('#5').val()+'\n \n[b]Localidade:[/b]  '+jQuery('#6').val()+'\n \n[b]Tempo de aquarismo:[/b]  '+jQuery('#7').val()+'\n <br>[b]Como conheceu o AquaPeixes:[/b]<br><br> '+jQuery('#8').val()+'\n <br>[b]Fale um pouco sobre você:[/b]<br><br> '+jQuery('#9').val()+'\n <br>[b]Fale um pouco de sua experiência aquarística:[/b]<br><br> '+jQuery('#10').val()+'\n');


jQuery('input[name="subject"]').val(' '+jQuery('#2').val()+'  '+jQuery('#3').val()+'  '+jQuery('#4').val()+'');

jQuery('input[name="f"]').val('3');
}
</script> <style>#2.find, #2 {
position: relative !important;
top: -5px !important;
margin-left: 35px !important;
}
.fields1 {
padding: 15px;
padding-top: 5px;
background-color: white;
border: 1x solid #1675BC;
}
input, select {
position: relative;
margin-left: 55px !important;
width: 250px;
}
</style>
<form method="post" action="/post" name="post" enctype="multipart/form-data">

<h1 class="page-title">
Formulário de apresentação dos novos membros.
</h1>
<br />
<div class="panel row3">

<div class="inner">
<span class="corners-top"><span></span></span>
<div class="h3" style="margin-top: 7px;">

<center>
<strong><span style="font-size: 15px; Georgia; line-height: normal; color: red;">Seja bem vindo ao AquaPeixes!</span></strong>
</center>

</div><br />
</div>

</div><br />
<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<div class="h3" style="margin-top: 7px;">
Sobre o formulário
</div>

<p style="font-size: 12px;">
O presente formulário foi criado com o objetivo de promover uma melhor apresentação e socialização dos novos membros. Em cada uma das divisões basta descrever o que é pedido. Assim que tudo estiver feito, poderá enviar o tópico, que será postado automaticamente. Caso queira pré-visualizar sua mensagem, basta clicar no botão correspondente "Pré-visualizar". E se caso enviar sua mensagem e mesmo assim precisar editar, basta editá-la no tópico, por meio do botão "Editar".
</p><span class="corners-bottom"><span></span></span>
</div>

</div><br />
<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<div class="h3" style="margin-top: 7px;">
Atenção!
</div>

<p style="font-size: 12px;">
Para melhor podermos ajudar, utilize este formulário apenas para sua apresentação, para qualquer outro assunto, utilize um de nossos fóruns específicos, se não souber em qual melhor se encaixa sua dúvida, sem problema, a Equipe de Moderação estará sempre disposta a ajudar. Fique atento com as nossas <a href="http://aquapeixes.forumeiros.com/t2-regras-de-utilizacao#2">Regras de utilização do fórum!</a>
</p><span class="corners-bottom"><span></span></span>
</div>

</div><br />
<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
Sobre o Título
</h3>
<br /> <dl class="campos_form"><dt><span class="1"><label>Prefixo Título:</label></span></dt><br /><dd><span class="2" style="floar: right"><select class="find " id="2"><option value="[Apresentação]">Apresentação</option></select></span></dd></dl> <br /><dl class="campos_form"><dt><span class="1"><label>Título:</label>Descreva um título bem descritivo.</span></dt><br /><dd><span class="2"><input class="find input" id="3" "="" style="width: 700px; height: 20px; clear: both;" type="text" /></span></dd></dl><br /> <br /><dl class="campos_form"><dt><span class="1"><label>Nome/Apelido:</label>Este campo vai compor o título.</span></dt><br /><dd><span class="2"><input class="find input" id="4" "="" style="width: 700px; height: 20px; clear: both;" type="text" /></span></dd></dl>
</div><br /><br />
<p>

</p><span class="corners-bottom"><span></span></span>
</div>

</div>

<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
Informações gerais:
</h3>
<br /> <dl class="campos_form"><dt><span class="1"><label>Nome/Apelido:</label>Como gostaria de ser chamado?</span></dt><dd><br /><span class="2"><input class="find input" id="5" "="" style="width: 400px; height: 20px; clear: both;" type="text" /></span></dd></dl><br /><dl class="campos_form"><dt><span class="1"><label>Localidade:</label>Diga-nos onde mora.</span></dt><br /><dd><span class="2"><input class="find input" id="6" "="" style="width: 400px; height: 20px; clear: both;" type="text" /></span></dd></dl><br /><dl class="campos_form"><dt><span class="1"><label>Tempo de aquarismo:</label>Quanto tempo esta no hobby?</span></dt><br /><dd><span class="2"><input class="find input" id="7" "="" style="width: 400px; height: 20px; clear: both;" type="text" /></span></dd></dl>
<p>

</p><span class="corners-bottom"><span></span></span>
</div>

</div>

<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
Ajude-nos a divulgar melhor o AquaPeixes:
</h3>
<br /> <dl class="campos_form"><dt><span class="1"><label>Como conheceu o AquaPeixes?</label> Informe como chegou até nós.</span></dt><br /><dd><span class="2" style="floar: right"><select class="find " id="8"><option value="Google">Google</option><option value="Fóruns">Fóruns</option><option value="Revistas">Revistas</option><option value="Livros">Livros</option><option value="Amigos">Amigos</option><option value="Outros">Outros</option></select></span></dd></dl> <br />
<p>

</p><span class="corners-bottom"><span></span></span>
</div>

</div>

<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
Observações relevantes:
</h3>
<br /> <dl class="campos_form"><dt><span class="1"><label>Fale um pouco sobre você: </label></span></dt><br /><dd><span class="2"><textarea style="" rows="7" cols="35" class="find textarea" id="9">Descreva o máximo que puder, este campo é bastante importante para conhecermos melhor! Selecione todo o texto deste campo e apague!</textarea></span></dd></dl><br /> <dl class="campos_form"><dt><span class="1"><label>Fale um pouco de sua experiência aquarística:</label></span></dt><br /><dd><span class="2"><textarea style="" rows="7" cols="35" class="find textarea" id="10">Descreva tudo o que lembrar, este campo é o que nos permitira saber de sua experiência com o hobby! Selecione todo o texto deste campo e apague!</textarea></span></dd></dl>
</div><br />
<p>

</p><span class="corners-bottom"><span></span></span>
</div>

</div><br /><br />
<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span> <input name="post" onclick="gerarf();" value="Enviar" type="submit" /><input name="preview" onclick="gerarf();" value="Pré-visualizar" type="submit" /><input name="message" value="Formulário" type="hidden" /><input name="subject" value="Formulário" type="hidden" /><input name="mode" value="newtopic" type="hidden" /><input name="f" value="1" type="hidden" /> <span class="corners-bottom"><span></span></span>
</div>

</div>

</div>

</div>

</div>
</form>

Pode ser visto aqui:

http://aquapeixes.forumeiros.com/h11-formulario-de-apresentacao

Fica na parte de Observações relevantes...

  • Informações:
Fórum:http://aquapeixes.forumeiros.comVersão:PHPBB2
Tipo:Pedido de códigoTags:Descritivo,Campo,texto



Última edição por Mauricio Molina em 09/05/14, 12:24 pm, editado 1 vez(es)
avatar

Mauricio Molina
Usuário destaque

Masculino
Inscrito dia : 22/09/2009
Mensagens : 993
Pontos Ativos : 1429

Ver perfil do usuário http://aquapeixes.forumeiros.com/forum.htm

Resolvido Re: Descritivo em Campo de texto

Mensagem por waghcwb em 08/05/14, 09:10 pm

Olá,

É possível sim, graças ao poder do HTML5!!

Existe um novo atributo para tags input no HTML5, chamado placeholder, veja como funciona:
Código:
<input type="text" placeholder="Minha mensagem descritiva"/>

É muito simples, basta alterar isso em seu código...

@Edit

Leia mais:
http://www.devmedia.com.br/placeholder-html5/24503
http://www.devmedia.com.br/html5-placeholder-como-estilizar/24589

E aqui outras coisas interessantes para se usar em formulários com HTML5
http://diveintohtml5.info/forms.html
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: Descritivo em Campo de texto

Mensagem por Shek em 08/05/14, 09:13 pm

Olá!

Substitua seu código por este:
Código:
<script>
function gerarf(){
jQuery('input[name="message"]').val('<br/>[b]Nome/apelido:[/b]  '+jQuery('#5').val()+'\n \n[b]Localidade:[/b]  '+jQuery('#6').val()+'\n \n[b]Tempo de aquarismo:[/b]  '+jQuery('#7').val()+'\n <br>[b]Como conheceu o AquaPeixes:[/b]<br><br> '+jQuery('#8').val()+'\n <br>[b]Fale um pouco sobre você:[/b]<br><br> '+jQuery('#9').val()+'\n <br>[b]Fale um pouco de sua experiência aquarística:[/b]<br><br> '+jQuery('#10').val()+'\n');


jQuery('input[name="subject"]').val(' '+jQuery('#2').val()+'  '+jQuery('#3').val()+'  '+jQuery('#4').val()+'');

jQuery('input[name="f"]').val('3');
}
</script> <style>#2.find, #2 {
position: relative !important;
top: -5px !important;
margin-left: 35px !important;
}
.fields1 {
padding: 15px;
padding-top: 5px;
background-color: white;
border: 1x solid #1675BC;
}
input, select {
position: relative;
margin-left: 55px !important;
width: 250px;
}
</style>
<form method="post" action="/post" name="post" enctype="multipart/form-data">

<h1 class="page-title">
Formulário de apresentação dos novos membros.
</h1>
<br />
<div class="panel row3">

<div class="inner">
<span class="corners-top"><span></span></span>
<div class="h3" style="margin-top: 7px;">

<center>
<strong><span style="font-size: 15px; Georgia; line-height: normal; color: red;">Seja bem vindo ao AquaPeixes!</span></strong>
</center>

</div><br />
</div>

</div><br />
<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<div class="h3" style="margin-top: 7px;">
Sobre o formulário
</div>

<p style="font-size: 12px;">
O presente formulário foi criado com o objetivo de promover uma melhor apresentação e socialização dos novos membros. Em cada uma das divisões basta descrever o que é pedido. Assim que tudo estiver feito, poderá enviar o tópico, que será postado automaticamente. Caso queira pré-visualizar sua mensagem, basta clicar no botão correspondente "Pré-visualizar". E se caso enviar sua mensagem e mesmo assim precisar editar, basta editá-la no tópico, por meio do botão "Editar".
</p><span class="corners-bottom"><span></span></span>
</div>

</div><br />
<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<div class="h3" style="margin-top: 7px;">
Atenção!
</div>

<p style="font-size: 12px;">
Para melhor podermos ajudar, utilize este formulário apenas para sua apresentação, para qualquer outro assunto, utilize um de nossos fóruns específicos, se não souber em qual melhor se encaixa sua dúvida, sem problema, a Equipe de Moderação estará sempre disposta a ajudar. Fique atento com as nossas <a href="http://aquapeixes.forumeiros.com/t2-regras-de-utilizacao#2">Regras de utilização do fórum!</a>
</p><span class="corners-bottom"><span></span></span>
</div>

</div><br />
<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
Sobre o Título
</h3>
<br /> <dl class="campos_form"><dt><span class="1"><label>Prefixo Título:</label></span></dt><br /><dd><span class="2" style="floar: right"><select class="find " id="2"><option value="[Apresentação]">Apresentação</option></select></span></dd></dl> <br /><dl class="campos_form"><dt><span class="1"><label>Título:</label>Descreva um título bem descritivo.</span></dt><br /><dd><span class="2"><input class="find input" id="3" "="" style="width: 700px; height: 20px; clear: both;" type="text" /></span></dd></dl><br /> <br /><dl class="campos_form"><dt><span class="1"><label>Nome/Apelido:</label>Este campo vai compor o título.</span></dt><br /><dd><span class="2"><input class="find input" id="4" "="" style="width: 700px; height: 20px; clear: both;" type="text" /></span></dd></dl>
</div><br /><br />
<p>

</p><span class="corners-bottom"><span></span></span>
</div>

</div>

<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
Informações gerais:
</h3>
<br /> <dl class="campos_form"><dt><span class="1"><label>Nome/Apelido:</label>Como gostaria de ser chamado?</span></dt><dd><br /><span class="2"><input class="find input" id="5" "="" style="width: 400px; height: 20px; clear: both;" type="text" /></span></dd></dl><br /><dl class="campos_form"><dt><span class="1"><label>Localidade:</label>Diga-nos onde mora.</span></dt><br /><dd><span class="2"><input class="find input" id="6" "="" style="width: 400px; height: 20px; clear: both;" type="text" /></span></dd></dl><br /><dl class="campos_form"><dt><span class="1"><label>Tempo de aquarismo:</label>Quanto tempo esta no hobby?</span></dt><br /><dd><span class="2"><input class="find input" id="7" "="" style="width: 400px; height: 20px; clear: both;" type="text" /></span></dd></dl>
<p>

</p><span class="corners-bottom"><span></span></span>
</div>

</div>

<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
Ajude-nos a divulgar melhor o AquaPeixes:
</h3>
<br /> <dl class="campos_form"><dt><span class="1"><label>Como conheceu o AquaPeixes?</label> Informe como chegou até nós.</span></dt><br /><dd><span class="2" style="floar: right"><select class="find " id="8"><option value="Google">Google</option><option value="Fóruns">Fóruns</option><option value="Revistas">Revistas</option><option value="Livros">Livros</option><option value="Amigos">Amigos</option><option value="Outros">Outros</option></select></span></dd></dl> <br />
<p>

</p><span class="corners-bottom"><span></span></span>
</div>

</div>

<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
Observações relevantes:
</h3>
<br /> <dl class="campos_form"><dt><span class="1"><label>Fale um pouco sobre você: </label></span></dt><br /><dd><span class="2"><textarea style="" rows="7" cols="35" class="find textarea" id="9" onclick="if (this.value == 'Descreva o máximo que puder, este campo é bastante importante para conhecermos melhor! Selecione todo o texto deste campo e apague!') this.value = '';" onblur="if (this.value == '') this.value = 'Descreva o máximo que puder, este campo é bastante importante para conhecermos melhor! Selecione todo o texto deste campo e apague!';">Descreva o máximo que puder, este campo é bastante importante para conhecermos melhor! Selecione todo o texto deste campo e apague!</textarea></span></dd></dl><br /> <dl class="campos_form"><dt><span class="1"><label>Fale um pouco de sua experiência aquarística:</label></span></dt><br /><dd><span class="2"><textarea style="" rows="7" cols="35" class="find textarea" id="10" onclick="if (this.value == 'Descreva tudo o que lembrar, este campo é o que nos permitira saber de sua experiência com o hobby! Selecione todo o texto deste campo e apague!') this.value = '';" onblur="if (this.value == '') this.value = 'Descreva tudo o que lembrar, este campo é o que nos permitira saber de sua experiência com o hobby! Selecione todo o texto deste campo e apague!';">Descreva tudo o que lembrar, este campo é o que nos permitira saber de sua experiência com o hobby! Selecione todo o texto deste campo e apague!</textarea></span></dd></dl>
</div><br />
<p>

</p><span class="corners-bottom"><span></span></span>
</div>

</div><br /><br />
<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span> <input name="post" onclick="gerarf();" value="Enviar" type="submit" /><input name="preview" onclick="gerarf();" value="Pré-visualizar" type="submit" /><input name="message" value="Formulário" type="hidden" /><input name="subject" value="Formulário" type="hidden" /><input name="mode" value="newtopic" type="hidden" /><input name="f" value="1" type="hidden" /> <span class="corners-bottom"><span></span></span>
</div>

</div>

</div>

</div>

</div>
</form>
Atenciosamente,
Shek

Tópico movido de 'Questões sobre HTML e BBCODE' para 'JavaScript e jQuery'


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Shek Crowley
avatar

Shek
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17546
Pontos Ativos : 21775

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Resolvido Re: Descritivo em Campo de texto

Mensagem por -Heeh em 08/05/14, 09:27 pm

Muito legal! Foi bem útil,obrigada.
avatar

-Heeh
Nível 7

Feminino
Inscrito dia : 31/07/2013
Mensagens : 81
Pontos Ativos : 119

Ver perfil do usuário http://wordpixel.umforum.net/ https://www.facebook.com//hellenmiranda123 https://twitter.com/@Heeh_Rock

Resolvido Re: Descritivo em Campo de texto

Mensagem por Mauricio Molina em 09/05/14, 11:05 am

Nossa galera muito obrigado!

É possível fazê-lo funcionar em qualquer navegador?

Ajudaram e muto...
avatar

Mauricio Molina
Usuário destaque

Masculino
Inscrito dia : 22/09/2009
Mensagens : 993
Pontos Ativos : 1429

Ver perfil do usuário http://aquapeixes.forumeiros.com/forum.htm

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum