Ruby on Rails: como adicionar texto de espaço reservado a um campo f.text_field?

144

Como posso adicionar placeholdertexto aos meus f.text_fieldcampos para que o texto seja pré-escrito por padrão e, quando um usuário clica dentro dos campos, o texto desaparece - permitindo que o usuário digite o novo texto?

NullVoxPopuli
fonte
HTML5 suporta isso. Enquanto isso, existem soluções javascript .
21810 Ghoppe
3
Sugiro adicionar a resposta do nslocum em vez da minha. Sua é a correcta para o Rails 3.
Chuck Callebs

Respostas:

269

Com trilhos> = 3.0, você pode simplesmente usar a placeholderopção

f.text_field :attr, placeholder: "placeholder text"
nslocum
fonte
4
O atributo "placeholder" é suportado apenas por navegadores compatíveis com HTML5, deixando de fora navegadores como o Internet Explorer.
precisa
1
O URL correto para a correção do jQuery é hagenburger.net/BLOG/…
szeryf
1
@KDP: Parece ser o mesmo em Rails 2, embora você pode precisar da velha sintaxe de atributo:f.text_field :attr, :placeholder => "placeholder text"
mwfearnley
É possível adicionar um texto longo - talvez como um arquivo html separado - como um espaço reservado? Eu estou tentando fornecer um modelo para que os usuários escrevam seu conteúdo no.
sofarsophie
32

No Rails 4 (usando HAML):

=f.text_field :first_name, class: 'form-control', autofocus: true, placeholder: 'First Name'
Zoltan
fonte
15

Para quem usa Internacionalização do Rails (4.2) (I18n):

Defina o atributo placeholder como true:

f.text_field :attr, placeholder: true

e no seu arquivo local (ou seja, en.yml):

en:
  helpers:
    placeholder:
      model_name:
        attr: "some placeholder text"
cweston
fonte
Obrigado que funcionou. Eu não coloquei o placeholder: true. Depois de definir como você descreveu, funcionou.
Hendrik
2

Aqui está uma sintaxe muito mais limpa se você estiver usando rails 4+

<%= f.text_field :attr, placeholder: "placeholder text" %>

Então, rails 4+agora pode usar essa sintaxe em vez da sintaxe de hash

Abhilash
fonte
1
Qual é a diferença da resposta @nslocum aceita?
Mlt
@mlt A resposta aceita foi atualizada para semelhante depois de fornecer esta resposta.
Abhilash
2

Eu tentei as soluções acima e parece nos trilhos 5. * o segundo instrumento por padrão é o valor do formulário de entrada, o que funcionou para mim foi:

text_field_tag :attr, "", placeholder: "placeholder text"
Prosper Opara
fonte
1

No seu modelo de visualização, defina um valor padrão:

f.text_field :password, :value => "password"

No seu Javascript (assumindo jquery aqui):

$(document).ready(function() {
  //add a handler to remove the text
});
Jed Schneider
fonte
1
O campo de pesquisa do Huffington Post usa esse trecho de JS dentro do elemento de entrada: onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"Parece uma boa abordagem.
Nathan