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 Qui 8 Maio 2014 - 20:59

  • 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 Sex 9 Maio 2014 - 12:24, editado 1 vez(es)
avatar

Mauricio Molina
Usuário destaque

Masculino
Inscrito dia : 22/09/2009
Mensagens : 988
Pontos Ativos : 1422

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

Resolvido Re: Descritivo em Campo de texto

Mensagem por waghcwb em Qui 8 Maio 2014 - 21:10

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 Qui 8 Maio 2014 - 21:13

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'


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17137
Pontos Ativos : 21398

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

Resolvido Re: Descritivo em Campo de texto

Mensagem por -Heeh em Qui 8 Maio 2014 - 21:27

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 Sex 9 Maio 2014 - 11:05

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 : 988
Pontos Ativos : 1422

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

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

- Tópicos similares

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