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?


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"

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'

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"

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


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"

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
});

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.