Descritivo em Campo de texto

4 participantes

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

Tópico resolvido Descritivo em Campo de texto

Mensagem por Mauricio Molina 09.05.14 0: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:

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 16:24, editado 1 vez(es)
Mauricio Molina

Mauricio Molina
Membro

Membro desde : 22/09/2009
Mensagens : 993
Pontos : 1429

http://aquapeixes.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Descritivo em Campo de texto

Mensagem por waghcwb 09.05.14 1: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
waghcwb

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Descritivo em Campo de texto

Mensagem por Shek 09.05.14 1: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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Descritivo em Campo de texto

Mensagem por -Heeh 09.05.14 1:27

Muito legal! Foi bem útil,obrigada.
-Heeh

-Heeh
**

Membro desde : 01/08/2013
Mensagens : 81
Pontos : 119

http://wordpixel.umforum.net/ https://www.facebook.com//hellenmiranda123 https://twitter.com/@Heeh_Rock

Ir para o topo Ir para baixo

Tópico resolvido Re: Descritivo em Campo de texto

Mensagem por Mauricio Molina 09.05.14 15:05

Nossa galera muito obrigado!

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

Ajudaram e muto...
Mauricio Molina

Mauricio Molina
Membro

Membro desde : 22/09/2009
Mensagens : 993
Pontos : 1429

http://aquapeixes.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos